{"html":"

\n\n

\n \n \n \n \n

\n \n

\n\n \n

\n","css":".search-orb-container {\n position: relative;\n width: 400px;\n height: 72px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n font-family:\n \"Inter\",\n system-ui,\n -apple-system,\n sans-serif;\n}\n\n.gooey-background-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n filter: url(\"#enhanced-goo\");\n z-index: 1;\n}\n\n.blob {\n position: absolute;\n background: linear-gradient(135deg, #6366f1, #d946ef);\n border-radius: 50%;\n transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.blob-1 {\n width: 140px;\n height: 72px;\n left: 0;\n top: 0;\n animation: blob-float 6s infinite alternate ease-in-out;\n}\n\n.blob-2 {\n width: 120px;\n height: 72px;\n right: 0;\n top: 0;\n background: linear-gradient(135deg, #d946ef, #8b5cf6);\n animation: blob-float 8s infinite alternate-reverse ease-in-out;\n}\n\n.blob-3 {\n width: 200px;\n height: 72px;\n left: 50%;\n transform: translateX(-50%);\n background: linear-gradient(135deg, #8b5cf6, #6366f1);\n opacity: 0.9;\n}\n\n.blob-bridge {\n position: absolute;\n height: 40px;\n width: 80%;\n left: 10%;\n top: 16px;\n background: #8b5cf6;\n border-radius: 40px;\n}\n\n.input-overlay {\n position: relative;\n z-index: 10;\n width: 90%;\n height: 52px;\n background: rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 26px;\n display: flex;\n align-items: center;\n padding: 0 20px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n.modern-input {\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n color: white;\n font-size: 15px;\n font-weight: 500;\n padding-left: 12px;\n letter-spacing: 0.02em;\n}\n\n.modern-input::placeholder {\n color: rgba(255, 255, 255, 0.6);\n font-weight: 400;\n}\n\n.search-icon-wrapper {\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.9;\n}\n\n.search-icon {\n width: 18px;\n height: 18px;\n}\n\n.focus-indicator {\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 0%;\n height: 2px;\n background: white;\n transform: translateX(-50%);\n transition: width 0.4s ease;\n border-radius: 2px;\n box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);\n}\n\n.search-orb-container:focus-within .input-overlay {\n transform: translateY(-4px);\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.4);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);\n}\n\n.search-orb-container:focus-within .focus-indicator {\n width: 40%;\n}\n\n.search-orb-container:focus-within .blob-1 {\n transform: scale(1.15) translateX(-20px);\n filter: brightness(1.2);\n}\n\n.search-orb-container:focus-within .blob-2 {\n transform: scale(1.15) translateX(20px);\n filter: brightness(1.2);\n}\n\n@keyframes blob-float {\n 0% {\n border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;\n transform: translate(0, 0);\n }\n 50% {\n border-radius: 60% 40% 50% 50% / 30% 60% 40% 70%;\n transform: translate(5px, -5px);\n }\n 100% {\n border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;\n transform: translate(-5px, 5px);\n }\n}\n\n.gooey-svg-filter {\n position: absolute;\n width: 0;\n height: 0;\n pointer-events: none;\n}\n"}

short-catfish-71

👁 实时预览

📝 源代码