{"html":"

\n \n \n

\n\n

OFF

\n\n

\n \n

\n","css":".toggle-container {\n position: relative;\n width: 150px;\n display: flex;\n flex-direction: column;\n align-items: center;\n perspective: 800px;\n z-index: 5;\n}\n\n.toggle-wrap {\n position: relative;\n width: 100%;\n height: 60px;\n transform-style: preserve-3d;\n}\n\n.toggle-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-track {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 30, 60, 0.4);\n border-radius: 30px;\n cursor: pointer;\n box-shadow:\n 0 0 15px rgba(0, 80, 255, 0.2),\n inset 0 0 10px rgba(0, 0, 0, 0.8);\n overflow: hidden;\n backdrop-filter: blur(5px);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n border: 1px solid rgba(0, 150, 255, 0.3);\n}\n\n.toggle-track::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 80, 255, 0.1) 0%,\n rgba(0, 0, 0, 0) 70%\n ),\n linear-gradient(90deg, rgba(0, 60, 120, 0.1) 0%, rgba(0, 30, 60, 0.2) 100%);\n opacity: 0.6;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.toggle-track::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n right: 2px;\n height: 10px;\n background: linear-gradient(\n 90deg,\n rgba(0, 170, 255, 0.3) 0%,\n rgba(0, 80, 255, 0.1) 100%\n );\n border-radius: 30px 30px 0 0;\n opacity: 0.7;\n filter: blur(1px);\n}\n\n.track-lines {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: 1px;\n transform: translateY(-50%);\n overflow: hidden;\n}\n\n.track-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 90deg,\n rgba(0, 150, 255, 0.3) 0px,\n rgba(0, 150, 255, 0.3) 5px,\n transparent 5px,\n transparent 15px\n );\n animation: track-line-move 3s linear infinite;\n}\n\n@keyframes track-line-move {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(20px);\n }\n}\n\n.toggle-thumb {\n position: absolute;\n width: 54px;\n height: 54px;\n left: 3px;\n top: 3px;\n background: radial-gradient(\n circle,\n rgba(10, 40, 90, 0.9) 0%,\n rgba(0, 20, 50, 0.8) 100%\n );\n border-radius: 50%;\n box-shadow:\n 0 2px 15px rgba(0, 0, 0, 0.5),\n inset 0 0 15px rgba(0, 150, 255, 0.5);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 2;\n border: 1px solid rgba(0, 170, 255, 0.6);\n overflow: hidden;\n transform-style: preserve-3d;\n}\n\n.thumb-core {\n position: absolute;\n width: 40px;\n height: 40px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle,\n rgba(0, 180, 255, 0.6) 0%,\n rgba(0, 50, 120, 0.2) 100%\n );\n border-radius: 50%;\n box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);\n opacity: 0.9;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.thumb-inner {\n position: absolute;\n width: 25px;\n height: 25px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.8) 0%,\n rgba(100, 200, 255, 0.5) 100%\n );\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(100, 200, 255, 0.7);\n opacity: 0.7;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n animation: pulse 2s infinite alternate;\n}\n\n@keyframes pulse {\n 0% {\n opacity: 0.5;\n transform: translate(-50%, -50%) scale(0.9);\n }\n 100% {\n opacity: 0.8;\n transform: translate(-50%, -50%) scale(1.1);\n }\n}\n\n.thumb-scan {\n position: absolute;\n width: 100%;\n height: 5px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 150, 255, 0.5) 20%,\n rgba(255, 255, 255, 0.8) 50%,\n rgba(0, 150, 255, 0.5) 80%,\n rgba(0, 0, 0, 0) 100%\n );\n top: 0;\n left: 0;\n filter: blur(1px);\n animation: thumb-scan 2s linear infinite;\n opacity: 0.7;\n}\n\n@keyframes thumb-scan {\n 0% {\n top: -5px;\n opacity: 0;\n }\n 20% {\n opacity: 0.7;\n }\n 80% {\n opacity: 0.7;\n }\n 100% {\n top: 54px;\n opacity: 0;\n }\n}\n\n.thumb-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n overflow: hidden;\n}\n\n.thumb-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: rgba(100, 200, 255, 0.8);\n border-radius: 50%;\n box-shadow: 0 0 5px rgba(100, 200, 255, 0.8);\n animation: thumb-particle-float 3s infinite ease-out;\n opacity: 0;\n}\n\n.thumb-particle:nth-child(1) {\n top: 70%;\n left: 30%;\n animation-delay: 0.2s;\n}\n\n.thumb-particle:nth-child(2) {\n top: 60%;\n left: 60%;\n animation-delay: 0.6s;\n}\n\n.thumb-particle:nth-child(3) {\n top: 50%;\n left: 40%;\n animation-delay: 1s;\n}\n\n.thumb-particle:nth-child(4) {\n top: 40%;\n left: 70%;\n animation-delay: 1.4s;\n}\n\n.thumb-particle:nth-child(5) {\n top: 80%;\n left: 50%;\n animation-delay: 1.8s;\n}\n\n@keyframes thumb-particle-float {\n 0% {\n transform: translateY(0) scale(1);\n opacity: 0;\n }\n 20% {\n opacity: 0.8;\n }\n 100% {\n transform: translateY(-30px) scale(0);\n opacity: 0;\n }\n}\n\n.toggle-data {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n.data-text {\n position: absolute;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 1px;\n text-transform: uppercase;\n transition: all 0.5s ease;\n}\n\n.data-text.off {\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n opacity: 1;\n color: rgba(0, 150, 255, 0.6);\n text-shadow: 0 0 5px rgba(0, 100, 255, 0.4);\n}\n\n.data-text.on {\n left: 15px;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n color: rgba(0, 255, 150, 0.6);\n text-shadow: 0 0 5px rgba(0, 255, 100, 0.4);\n}\n\n.status-indicator {\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: radial-gradient(\n circle,\n rgba(0, 180, 255, 0.8) 0%,\n rgba(0, 80, 200, 0.4) 100%\n );\n box-shadow: 0 0 10px rgba(0, 150, 255, 0.5);\n animation: blink 2s infinite alternate;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.status-indicator.off {\n top: 25px;\n right: 15px;\n}\n\n.status-indicator.on {\n top: 25px;\n left: 15px;\n opacity: 0;\n background: radial-gradient(\n circle,\n rgba(0, 255, 150, 0.8) 0%,\n rgba(0, 200, 80, 0.4) 100%\n );\n box-shadow: 0 0 10px rgba(0, 255, 150, 0.5);\n}\n\n@keyframes blink {\n 0%,\n 100% {\n opacity: 0.5;\n transform: scale(0.9);\n }\n 50% {\n opacity: 1;\n transform: scale(1.1);\n }\n}\n\n.energy-rings {\n position: absolute;\n width: 54px;\n height: 54px;\n left: 3px;\n top: 3px;\n pointer-events: none;\n z-index: 1;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.energy-ring {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n border: 2px solid transparent;\n opacity: 0;\n}\n\n.energy-ring:nth-child(1) {\n width: 50px;\n height: 50px;\n border-top-color: rgba(0, 150, 255, 0.5);\n border-right-color: rgba(0, 150, 255, 0.3);\n animation: spin 3s linear infinite;\n}\n\n.energy-ring:nth-child(2) {\n width: 40px;\n height: 40px;\n border-bottom-color: rgba(0, 150, 255, 0.5);\n border-left-color: rgba(0, 150, 255, 0.3);\n animation: spin 2s linear infinite reverse;\n}\n\n.energy-ring:nth-child(3) {\n width: 30px;\n height: 30px;\n border-left-color: rgba(0, 150, 255, 0.5);\n border-top-color: rgba(0, 150, 255, 0.3);\n animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n\n.interface-lines {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.interface-line {\n position: absolute;\n background: rgba(0, 150, 255, 0.3);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.interface-line:nth-child(1) {\n width: 15px;\n height: 1px;\n bottom: -5px;\n left: 20px;\n}\n\n.interface-line:nth-child(2) {\n width: 1px;\n height: 8px;\n bottom: -12px;\n left: 35px;\n}\n\n.interface-line:nth-child(3) {\n width: 25px;\n height: 1px;\n bottom: -12px;\n left: 35px;\n}\n\n.interface-line:nth-child(4) {\n width: 15px;\n height: 1px;\n bottom: -5px;\n right: 20px;\n}\n\n.interface-line:nth-child(5) {\n width: 1px;\n height: 8px;\n bottom: -12px;\n right: 35px;\n}\n\n.interface-line:nth-child(6) {\n width: 25px;\n height: 1px;\n bottom: -12px;\n right: 10px;\n}\n\n.toggle-reflection {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.1) 0%,\n rgba(255, 255, 255, 0) 40%\n );\n border-radius: 30px;\n pointer-events: none;\n}\n\n.toggle-label {\n position: relative;\n margin-top: 20px;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 2px;\n text-align: center;\n color: rgba(0, 150, 255, 0.7);\n text-shadow: 0 0 10px rgba(0, 100, 255, 0.5);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.holo-glow {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 150, 255, 0.2) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n filter: blur(10px);\n opacity: 0.5;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 0;\n}\n\n.toggle-input:checked + .toggle-track {\n background: rgba(0, 60, 30, 0.4);\n border-color: rgba(0, 255, 150, 0.3);\n box-shadow:\n 0 0 15px rgba(0, 255, 150, 0.2),\n inset 0 0 10px rgba(0, 0, 0, 0.8);\n}\n\n.toggle-input:checked + .toggle-track::before {\n background: radial-gradient(\n ellipse at center,\n rgba(0, 255, 150, 0.1) 0%,\n rgba(0, 0, 0, 0) 70%\n ),\n linear-gradient(90deg, rgba(0, 120, 60, 0.1) 0%, rgba(0, 60, 30, 0.2) 100%);\n}\n\n.toggle-input:checked + .toggle-track::after {\n background: linear-gradient(\n 90deg,\n rgba(0, 255, 150, 0.3) 0%,\n rgba(0, 160, 80, 0.1) 100%\n );\n}\n\n.toggle-input:checked + .toggle-track .track-line {\n background: repeating-linear-gradient(\n 90deg,\n rgba(0, 255, 150, 0.3) 0px,\n rgba(0, 255, 150, 0.3) 5px,\n transparent 5px,\n transparent 15px\n );\n animation-direction: reverse;\n}\n\n.toggle-input:checked + .toggle-track .toggle-thumb {\n left: calc(100% - 57px);\n background: radial-gradient(\n circle,\n rgba(10, 90, 40, 0.9) 0%,\n rgba(0, 50, 20, 0.8) 100%\n );\n border-color: rgba(0, 255, 150, 0.6);\n box-shadow:\n 0 2px 15px rgba(0, 0, 0, 0.5),\n inset 0 0 15px rgba(0, 255, 150, 0.5);\n}\n\n.toggle-input:checked + .toggle-track .thumb-core {\n background: radial-gradient(\n circle,\n rgba(0, 255, 150, 0.6) 0%,\n rgba(0, 120, 50, 0.2) 100%\n );\n box-shadow: 0 0 20px rgba(0, 255, 150, 0.5);\n}\n\n.toggle-input:checked + .toggle-track .thumb-inner {\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.8) 0%,\n rgba(100, 255, 200, 0.5) 100%\n );\n box-shadow: 0 0 10px rgba(100, 255, 200, 0.7);\n}\n\n.toggle-input:checked + .toggle-track .thumb-scan {\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 255, 150, 0.5) 20%,\n rgba(255, 255, 255, 0.8) 50%,\n rgba(0, 255, 150, 0.5) 80%,\n rgba(0, 0, 0, 0) 100%\n );\n}\n\n.toggle-input:checked + .toggle-track .thumb-particle {\n background: rgba(100, 255, 200, 0.8);\n box-shadow: 0 0 5px rgba(100, 255, 200, 0.8);\n}\n\n.toggle-input:checked + .toggle-track .data-text.off {\n opacity: 0;\n}\n\n.toggle-input:checked + .toggle-track .data-text.on {\n opacity: 1;\n}\n\n.toggle-input:checked + .toggle-track .status-indicator.off {\n opacity: 0;\n}\n\n.toggle-input:checked + .toggle-track .status-indicator.on {\n opacity: 1;\n}\n\n.toggle-input:checked + .toggle-track .energy-rings {\n left: calc(100% - 57px);\n}\n\n.toggle-input:checked + .toggle-track .energy-ring {\n opacity: 1;\n}\n\n.toggle-input:checked + .toggle-track .energy-ring:nth-child(1) {\n border-top-color: rgba(0, 255, 150, 0.5);\n border-right-color: rgba(0, 255, 150, 0.3);\n}\n\n.toggle-input:checked + .toggle-track .energy-ring:nth-child(2) {\n border-bottom-color: rgba(0, 255, 150, 0.5);\n border-left-color: rgba(0, 255, 150, 0.3);\n}\n\n.toggle-input:checked + .toggle-track .energy-ring:nth-child(3) {\n border-left-color: rgba(0, 255, 150, 0.5);\n border-top-color: rgba(0, 255, 150, 0.3);\n}\n\n.toggle-input:checked + .toggle-track .interface-line {\n background: rgba(0, 255, 150, 0.3);\n}\n\n.toggle-input:checked ~ .toggle-label {\n color: rgba(0, 255, 150, 0.7);\n text-shadow: 0 0 10px rgba(0, 255, 150, 0.5);\n}\n\n.toggle-input:checked + .toggle-track .holo-glow {\n background: radial-gradient(\n ellipse at center,\n rgba(0, 255, 150, 0.2) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n}\n\n.toggle-input:hover + .toggle-track {\n box-shadow:\n 0 0 20px rgba(0, 150, 255, 0.3),\n inset 0 0 10px rgba(0, 0, 0, 0.8);\n}\n\n.toggle-input:checked:hover + .toggle-track {\n box-shadow:\n 0 0 20px rgba(0, 255, 150, 0.3),\n inset 0 0 10px rgba(0, 0, 0, 0.8);\n}\n"}

stupid-penguin-97

👁 实时预览

📝 源代码