{"html":"\n\n

\n 110\n

\n 100\n

\n 90\n

\n 80\n

\n 70\n

\n 60\n

\n 50\n

\n 40\n

\n 30\n

70°

CURRENT

Comfort

\n","css":".svg {\n position: absolute;\n width: 0;\n height: 0;\n}\n.card {\n background: #131418;\n border-radius: 32px;\n padding: 14px 12px;\n box-shadow:\n 0 30px 50px -20px rgba(0, 0, 0, 0.95),\n 0 0 0 1px rgba(255, 255, 255, 0.03) inset,\n 0 0 0 1px rgba(255, 255, 255, 0.02);\n width: 156px;\n display: flex;\n flex-direction: column;\n align-items: center;\n backdrop-filter: blur(2px);\n}\n.glass-panel {\n background: rgba(10, 10, 12, 0.85);\n backdrop-filter: blur(12px) saturate(160%);\n -webkit-backdrop-filter: blur(12px) saturate(160%);\n border: 1px solid rgba(255, 255, 255, 0.08);\n box-shadow:\n 0 10px 18px -8px rgba(0, 0, 0, 0.8),\n 0 0 0 1px rgba(255, 255, 255, 0.02) inset;\n}\n.thermostat-ui {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n width: 100%;\n}\n.thermostat {\n position: relative;\n width: 58px;\n height: 190px;\n border-radius: 999px;\n overflow: visible;\n}\n.thermostat-inner {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: visible;\n}\n.thermostat-inner::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n border: 1px solid rgba(255, 255, 255, 0.06);\n mix-blend-mode: soft-light;\n pointer-events: none;\n}\n.glass-noise {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n opacity: 0.06;\n mix-blend-mode: overlay;\n pointer-events: none;\n background: repeating-radial-gradient(\n circle at 30% 40%,\n rgba(255, 255, 255, 0.1) 0px,\n transparent 2px\n );\n}\n.track {\n position: absolute;\n top: 18px;\n bottom: 18px;\n left: 50%;\n transform: translateX(-50%);\n width: 16px;\n border-radius: 999px;\n background: linear-gradient(\n 180deg,\n rgba(40, 40, 45, 1) 0%,\n rgba(20, 20, 22, 1) 50%,\n rgba(8, 8, 10, 1) 100%\n );\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, 0.8),\n inset 0 -1px 2px rgba(255, 255, 255, 0.05),\n 0 5px 12px rgba(0, 0, 0, 0.7);\n overflow: hidden;\n}\n.mercury {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 55%;\n background: #00f0ff;\n filter: url(#turbulent-displace);\n mix-blend-mode: screen;\n box-shadow:\n 0 0 18px #00f0ff,\n 0 0 32px #00f0ff,\n inset 0 -2px 5px rgba(255, 255, 255, 0.6);\n opacity: 0.99;\n border-radius: 0 0 999px 999px;\n transform: translateZ(0);\n will-change: transform;\n animation: flowWave 4s infinite alternate ease-in-out;\n}\n.mercury::before {\n content: \"\";\n position: absolute;\n top: -8px;\n left: 0;\n width: 100%;\n height: 12px;\n background: radial-gradient(\n circle at 30% 0%,\n rgba(255, 255, 255, 0.7) 0%,\n transparent 80%\n );\n filter: blur(3px);\n opacity: 0.5;\n}\n.mercury::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.4) 0%,\n transparent 70%\n );\n mix-blend-mode: hard-light;\n opacity: 0.25;\n animation: softPulse 2.5s infinite alternate ease-in-out;\n}\n@keyframes flowWave {\n 0% {\n filter: url(#turbulent-displace) brightness(1);\n transform: scaleY(1);\n }\n 50% {\n filter: url(#turbulent-displace) brightness(1.15);\n transform: scaleY(1.02);\n }\n 100% {\n filter: url(#turbulent-displace) brightness(1);\n transform: scaleY(1);\n }\n}\n@keyframes softPulse {\n 0% {\n opacity: 0.15;\n }\n 100% {\n opacity: 0.3;\n }\n}\n.knob-zone {\n position: absolute;\n top: 18px;\n bottom: 18px;\n left: 0;\n right: 0;\n pointer-events: none;\n}\n.knob {\n position: absolute;\n left: 50%;\n top: 45%;\n transform: translate(-50%, -50%);\n width: 30px;\n height: 30px;\n border-radius: 999px;\n background: radial-gradient(circle at 35% 35%, #4a4a55, #1c1c22);\n backdrop-filter: blur(6px) saturate(200%);\n -webkit-backdrop-filter: blur(6px) saturate(200%);\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-shadow:\n inset 0 2px 6px rgba(255, 255, 255, 0.2),\n inset 0 -2px 4px rgba(0, 0, 0, 0.7),\n 0 6px 12px rgba(0, 0, 0, 0.7);\n pointer-events: auto;\n}\n.scale-container {\n position: absolute;\n top: 18px;\n bottom: 18px;\n left: -34px;\n width: 28px;\n pointer-events: none;\n}\n.scale-mark {\n position: absolute;\n right: 0;\n font-size: 5.5px;\n color: rgba(210, 220, 240, 0.7);\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 2px;\n transform-origin: right center;\n opacity: 0.65;\n white-space: nowrap;\n letter-spacing: 0.2px;\n text-shadow: 0 0 3px #00f0ff50;\n font-family: \"Inter\", monospace;\n}\n.tick {\n height: 2px;\n background: rgba(220, 240, 255, 0.7);\n border-radius: 1px;\n flex-shrink: 0;\n box-shadow: 0 0 4px #00f0ff80;\n}\n.temp-readout {\n text-align: center;\n margin-top: 2px;\n}\n.temp-value {\n font-size: 1.2rem;\n font-weight: 600;\n text-shadow:\n 0 0 16px #00f0ff,\n 0 0 30px #00f0ff70;\n color: #eef5ff;\n line-height: 1.2;\n letter-spacing: -0.5px;\n background: linear-gradient(180deg, #ffffff, #aad0ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n filter: drop-shadow(0 0 10px #00f0ff);\n}\n.temp-label {\n font-size: 0.4rem;\n text-transform: uppercase;\n letter-spacing: 0.28em;\n opacity: 0.5;\n margin-top: 3px;\n color: #a0aaba;\n font-weight: 400;\n}\n.status-text {\n margin-top: 2px;\n font-size: 0.5rem;\n text-transform: uppercase;\n letter-spacing: 0.16em;\n color: #b5e4ff;\n opacity: 0.9;\n font-weight: 400;\n text-shadow: 0 0 6px #00f0ff;\n}\n/* reverse scale: 20° top, 110° bottom */\n.scale-mark[data-temp=\"20\"] {\n top: 0%;\n}\n.scale-mark[data-temp=\"30\"] {\n top: 11.111%;\n}\n.scale-mark[data-temp=\"40\"] {\n top: 22.222%;\n}\n.scale-mark[data-temp=\"50\"] {\n top: 33.333%;\n}\n.scale-mark[data-temp=\"60\"] {\n top: 44.444%;\n}\n.scale-mark[data-temp=\"70\"] {\n top: 55.555%;\n}\n.scale-mark[data-temp=\"80\"] {\n top: 66.666%;\n}\n.scale-mark[data-temp=\"90\"] {\n top: 77.777%;\n}\n.scale-mark[data-temp=\"100\"] {\n top: 88.888%;\n}\n.scale-mark[data-temp=\"110\"] {\n top: 99.999%;\n}\n\n.thermostat::after {\n content: \"\";\n position: absolute;\n inset: -4px;\n border-radius: 999px;\n background: radial-gradient(\n circle at 50% 20%,\n rgba(0, 240, 255, 0.1),\n transparent 80%\n );\n filter: blur(5px);\n z-index: -1;\n pointer-events: none;\n}\n"}

nervous-pig-41

👁 实时预览

📝 源代码