{"html":"

\n \n

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

\n \n \n \n

\n","css":"@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin-reverse {\n to {\n transform: rotate(-360deg);\n }\n}\n\n.body {\n display: grid;\n place-content: center;\n width: 100%;\n height: 100%;\n background-color: #ffead7;\n background-image: linear-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 0, 0, 0.2) 1px, transparent 1px);\n background-size: 2rem 2rem;\n}\n\n.grid,\n.white,\n.darkBorderBg,\n.glow,\n#pink-mask,\n#input-mask,\n.filterBorder {\n display: none;\n}\n\n#poda {\n position: relative;\n width: 333px;\n height: 64px;\n background: linear-gradient(145deg, #a77b5a, #825e41);\n border: 4px solid #2d241d;\n border-radius: 4px;\n box-shadow:\n inset 0 0 10px rgba(0, 0, 0, 0.6),\n 6px 6px 0px rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n padding: 4px;\n}\n\n#main {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n background: #2d241d;\n border-radius: 2px;\n box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);\n}\n\n.input {\n width: 100%;\n height: 100%;\n padding: 0 45px 0 50px;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 18px;\n color: #e4d5c7;\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);\n box-sizing: border-box;\n}\n\n.input:focus {\n outline: none;\n color: #fff;\n}\n\n.input::placeholder {\n color: #9c8c7e;\n opacity: 1;\n}\n\n.border {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.border::before {\n top: -16px;\n left: -16px;\n}\n\n.border::after {\n bottom: -16px;\n right: -16px;\n}\n\n#poda:focus-within > .border::before,\n#poda:focus-within > .border::after {\n color: #d4ac8e;\n}\n\n#poda:focus-within > .border::before {\n animation: spin 2s linear infinite;\n}\n\n#poda:focus-within > .border::after {\n animation: spin-reverse 2s linear infinite;\n}\n\n#search-icon,\n#filter-icon {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n display: grid;\n place-items: center;\n}\n\n#search-icon {\n left: 12px;\n pointer-events: none;\n}\n\n#filter-icon {\n right: 0;\n height: 100%;\n width: 42px;\n background: linear-gradient(145deg, #6c5441, #574334);\n cursor: pointer;\n border-left: 2px solid #2d241d;\n}\n\n#filter-icon:active {\n background: linear-gradient(145deg, #574334, #6c5441);\n}\n\n#search-icon svg circle,\n#search-icon svg line {\n stroke: #d4ac8e;\n stroke-width: 2.5;\n filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));\n}\n\n#search-icon svg defs {\n display: none;\n}\n\n#filter-icon svg path {\n stroke: #d4ac8e;\n stroke-width: 1.5;\n filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));\n}\n"}

black-skunk-81

👁 实时预览

📝 源代码