{"html":"

\n\n

\n","css":"/* Outer wrapper */\n.battery-container {\n position: relative;\n display: flex;\n justify-content: center;\n padding: 40px;\n}\n\n/* Battery Body */\n.battery {\n position: relative;\n width: 65px;\n height: 140px;\n background: white;\n border: 4px solid #94a3b8;\n border-radius: 15px;\n display: flex;\n align-items: flex-end;\n padding: 5px;\n overflow: hidden;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n}\n\n/* Battery Cap */\n.battery-cap {\n position: absolute;\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n width: 26px;\n height: 10px;\n background: #94a3b8;\n border-radius: 3px 3px 0 0;\n}\n\n/* Liquid Fill (Light Mode Default) */\n.liquid-fill {\n width: 100%;\n height: 0%;\n background: #3b82f6; /* blue */\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);\n animation: charge 4s linear infinite;\n}\n\n/* Bubbles */\n.bubble {\n position: absolute;\n background: rgba(255, 255, 255, 0.4);\n border-radius: 50%;\n bottom: 5px;\n animation: bubble-rise 2s ease-in infinite;\n}\n\n.bubble1 {\n width: 10px;\n height: 10px;\n left: 6px;\n}\n\n.bubble2 {\n width: 14px;\n height: 14px;\n right: 8px;\n animation-delay: 0.5s;\n animation-duration: 2.5s;\n}\n\n.bubble3 {\n width: 8px;\n height: 8px;\n left: 22px;\n animation-delay: 1s;\n animation-duration: 1.8s;\n}\n\n/* Glossy highlight */\n.battery-glow {\n position: absolute;\n top: 10px;\n right: 8px;\n width: 10px;\n height: 120px;\n background: rgba(255, 255, 255, 0.25);\n border-radius: 10px;\n pointer-events: none;\n}\n\n/* Charge animation */\n@keyframes charge {\n 0% {\n height: 0%;\n filter: hue-rotate(0deg);\n }\n 50% {\n height: 50%;\n }\n 90% {\n height: 100%;\n filter: hue-rotate(45deg);\n }\n 95% {\n height: 100%;\n opacity: 1;\n }\n 100% {\n height: 100%;\n opacity: 0;\n }\n}\n\n/* Bubble rise animation */\n@keyframes bubble-rise {\n 0% {\n transform: translateY(0);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-80px);\n opacity: 0;\n }\n}\n\n/* ------------------------------------------------ */\n/* 🔥 DARK MODE SUPPORT */\n/* ------------------------------------------------ */\n\n@media (prefers-color-scheme: dark) {\n .battery {\n background: #1e293b; /* slate-800 */\n border-color: #475569; /* slate-600 */\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);\n }\n\n .battery-cap {\n background: #475569;\n }\n\n .liquid-fill {\n background: #84cc16; /* lime-500 */\n box-shadow: 0 0 20px rgba(132, 204, 22, 0.6);\n }\n\n .battery-glow {\n background: rgba(255, 255, 255, 0.1);\n }\n}\n"}

young-turtle-75

👁 实时预览

📝 源代码