{"html":"

\n \n \n

","css":".input__container {\n position: relative;\n background: rgba(255, 255, 255, 0.664);\n padding: 10px 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n border-radius: 22px;\n max-width: 300px;\n transition: transform 400ms;\n transform-style: preserve-3d;\n transform: rotateX(15deg) rotateY(-20deg);\n perspective: 500px;\n}\n\n.shadow__input {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n bottom: 0;\n z-index: -1;\n filter: blur(30px);\n border-radius: 20px;\n background-color: #999cff;\n background-image: radial-gradient(at 85% 51%, hsla(60,60%,61%,1) 0px, transparent 50%),\n radial-gradient(at 74% 68%, hsla(235,69%,77%,1) 0px, transparent 50%),\n radial-gradient(at 64% 79%, hsla(284,72%,73%,1) 0px, transparent 50%),\n radial-gradient(at 75% 16%, hsla(283,60%,72%,1) 0px, transparent 50%),\n radial-gradient(at 90% 65%, hsla(153,70%,64%,1) 0px, transparent 50%),\n radial-gradient(at 91% 83%, hsla(283,74%,69%,1) 0px, transparent 50%),\n radial-gradient(at 72% 91%, hsla(213,75%,75%,1) 0px, transparent 50%);\n}\n\n.input__button__shadow {\n cursor: pointer;\n border: none;\n background: none;\n transition: transform 400ms, background 400ms;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 12px;\n padding: 5px;\n}\n\n.input__button__shadow:hover {\n background: rgba(255, 255, 255, 0.411);\n}\n\n.input__search {\n width: 100%;\n border-radius: 20px;\n outline: none;\n border: none;\n padding: 8px;\n position: relative;\n}"}

rare-baboon-42

👁 实时预览

📝 源代码