{"html":"

\n \n

\n \n \n \n \n

\n","css":".search-container {\n position: relative;\n width: 290px;\n}\n\n.search-bar {\n position: relative;\n display: flex;\n align-items: center;\n background-color: #1e1e1e;\n border-radius: 8px;\n padding: 10px;\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n.search-input {\n width: 100%;\n border: none;\n background: none;\n color: #fff;\n font-size: 16px;\n padding: 10px;\n outline: none;\n}\n\n.search-input::placeholder {\n color: #aaa;\n}\n\n.search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n background-color: #333;\n border-radius: 50%;\n margin-left: 10px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.search-icon svg {\n fill: #fff;\n}\n\n.search-icon:hover {\n background-color: #555;\n}\n\n.search-bar:hover {\n box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);\n}\n\n.search-bar:focus-within {\n box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);\n}\n\n.glow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 200%;\n border-radius: 100px;\n background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);\n transition: all 0.5s ease;\n transform: translate(-50%, -50%) scale(0);\n z-index: -1;\n}\n\n.search-bar:hover + .glow {\n transform: translate(-50%, -50%) scale(1);\n}\n\n.search-bar:focus-within + .glow {\n transform: translate(-50%, -50%) scale(1.2);\n background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);\n}\n"}

calm-eel-15

👁 实时预览

📝 源代码