{"html":"

\n \n \n \n \n \n\n \n

\n","css":".input {\n --icon-size: 28px;\n position: relative;\n}\n\n.input svg {\n position: absolute;\n width: var(--icon-size);\n top: 50%;\n left: 1rem;\n translate: 0 -50%;\n overflow: visible;\n color: color-mix(in lch, canvas, canvasText 30%);\n}\n\n.input svg path {\n transform-box: fill-box;\n transform-origin: center;\n}\n\n.input:is(:hover, :focus-within) .svg path {\n animation: pop 0.5s var(--d);\n}\n\n.input svg path:nth-of-type(1) {\n --d: 0.24s;\n --r: 20deg;\n --s: 1.5;\n}\n.input svg path:nth-of-type(2) {\n --d: 0.12s;\n --r: 10deg;\n --s: 1.4;\n}\n.input svg path:nth-of-type(3) {\n --d: 0s;\n --r: 0deg;\n --s: 1.25;\n}\n\n@keyframes pop {\n 50% {\n scale: var(--s, 1);\n rotate: var(--r, 0deg);\n }\n}\n\n.search::placeholder {\n color: color-mix(in lch, canvas, canvasText 30%);\n}\n\n.search {\n box-shadow:\n 0 20px 25px -5px rgb(0 0 0 / 0.15),\n 0 8px 10px -6px rgb(0 0 0 / 0.25);\n font-family: inherit;\n min-width: 300px;\n padding: 1rem 1rem 1rem calc(1rem + var(--icon-size) + 0.5rem);\n font-size: 1.025rem;\n field-sizing: content;\n background:\n linear-gradient(canvas, canvas) padding-box,\n linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%)) border-box;\n border: 4px solid transparent;\n border-radius: 12px;\n outline: none;\n /* background-clip: padding-box, border-box; */\n}\n\n.bear-link {\n color: canvasText;\n position: fixed;\n top: 1rem;\n left: 1rem;\n width: 48px;\n aspect-ratio: 1;\n display: grid;\n place-items: center;\n opacity: 0.8;\n}\n\n:where(.x-link, .bear-link):is(:hover, :focus-visible) {\n opacity: 1;\n}\n\n.bear-link .svg {\n width: 75%;\n}\n"}

shaggy-insect-49

👁 实时预览

📝 源代码