{"html":"\n

\n \n

\n\n","css":".cyber-switch {\n --width: 120px;\n --height: 220px;\n --border: 0px;\n --lever-height: 80px;\n --spacing: 20px;\n --on-color: #d69bd7;\n --off-color: #52b5e3;\n --glow-intensity: 0.2;\n\n width: var(--width);\n height: var(--height);\n position: relative;\n background: #000000;\n border: var(--border) solid #333;\n box-shadow:\n inset 0 0 10px #000,\n 0 0 0 2px #000;\n margin: auto;\n overflow: hidden;\n font-family: \"Courier New\", monospace;\n}\n\n/* Status indicator bars - top (green) and bottom (red) */\n.cyber-switch::before,\n.cyber-switch::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n height: 5px;\n z-index: 3;\n transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.cyber-switch::before {\n top: 0;\n background: var(--on-color);\n box-shadow: 0 0 15px var(--on-color);\n opacity: 1;\n transform: translateY(-10px);\n}\n\n.cyber-switch::after {\n bottom: 0;\n background: var(--off-color);\n box-shadow: 0 0 15px var(--off-color);\n opacity: 1;\n transform: translateY(10px);\n}\n\n/* Active states for indicator bars */\n.cyber-switch input:checked ~ ::before {\n opacity: 1;\n transform: translateY(0);\n}\n\n.cyber-switch input:checked ~ ::after {\n opacity: 0;\n transform: translateY(10px);\n}\n\n.cyber-switch input:not(:checked) ~ ::before {\n opacity: 0;\n transform: translateY(-10px);\n}\n\n.cyber-switch input:not(:checked) ~ ::after {\n opacity: 1;\n transform: translateY(0);\n}\n\n/* Switch core styles */\n.cyber-switch input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n z-index: 10;\n}\n\n.cyber-switch .lever {\n position: absolute;\n width: calc(100% - var(--spacing) * 2);\n height: var(--lever-height);\n left: var(--spacing);\n background: #040404;\n border: 1px solid #040404;\n z-index: 2;\n transition:\n top 0.4s cubic-bezier(0.5, 1.8, 0.5, 1.2),\n transform 0.2s ease,\n box-shadow 0.4s,\n border-color 0.4s;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n/* Shine animation */\n.cyber-switch .lever::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent 45%,\n rgba(243, 160, 229, 0.116) 50%,\n transparent 55%\n );\n background-size: 200% 200%;\n animation: shine 3s linear infinite paused;\n}\n\n@keyframes shine {\n 0% {\n background-position: -100% -100%;\n }\n 100% {\n background-position: 100% 100%;\n }\n}\n\n/* Lever inner circle */\n.cyber-switch .lever-inner {\n width: 50px;\n height: 50px;\n background: #000;\n border: 1px solid #3d6b86;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n transition: all 0.4s;\n}\n\n/* Active state gradient */\n.cyber-switch .lever-inner::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: conic-gradient(transparent, var(--on-color), transparent);\n opacity: 0;\n transition: opacity 0.4s;\n}\n\n/* O/1 text inside lever */\n.cyber-switch .lever-inner::after {\n content: \"0\";\n position: absolute;\n color: var(--off-color);\n font-weight: bold;\n font-size: 24px;\n text-shadow: 0 0 4px var(--off-color);\n transition: all 0.4s;\n}\n\n/* 1 State */\n.cyber-switch input:checked ~ .lever {\n top: var(--spacing);\n border-color: var(--on-color);\n box-shadow:\n 0 0 20px var(--on-color),\n inset 0 0 10px var(--on-color);\n}\n\n.cyber-switch input:checked ~ .lever::before {\n animation-play-state: running;\n}\n\n.cyber-switch input:checked ~ .lever .lever-inner {\n border-color: var(--on-color);\n}\n\n.cyber-switch input:checked ~ .lever .lever-inner::before {\n opacity: 0.6;\n}\n\n.cyber-switch input:checked ~ .lever .lever-inner::after {\n content: \"1\";\n color: var(--on-color);\n text-shadow: 0 0 10px var(--on-color);\n font-size: 24px;\n}\n\n/* OFF State */\n.cyber-switch input:not(:checked) ~ .lever {\n top: calc(100% - var(--lever-height) - var(--spacing));\n border-color: var(--off-color);\n box-shadow:\n 0 0 1px var(--off-color),\n inset 0 0 10px var(--off-color);\n}\n\n/* Press effect */\n.cyber-switch input:active ~ .lever {\n transform: scale(0.96);\n}\n\n.cyber-switch input:checked ~ .status {\n color: var(--on-color);\n text-shadow: 0 0 12px var(--on-color);\n transform: scale(1.05);\n}\n\n/* Circuit board lines */\n.cyber-switch .circuit {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.cyber-switch .circuit-line {\n position: absolute;\n background: #c2bfbf;\n transition: all 0.4s;\n}\n\n.cyber-switch .horizontal {\n width: 100%;\n height: 0.5px;\n}\n\n.cyber-switch .vertical {\n width: 1px;\n height: 100%;\n}\n\n.cyber-switch .circuit-line:nth-child(1) {\n top: 25%;\n}\n\n.cyber-switch .circuit-line:nth-child(2) {\n top: 75%;\n}\n\n.cyber-switch .circuit-line:nth-child(3) {\n left: 25%;\n}\n\n.cyber-switch .circuit-line:nth-child(4) {\n left: 75%;\n}\n\n/* Circuit line activation */\n.cyber-switch input:checked ~ .circuit .circuit-line {\n background: var(--on-color);\n box-shadow: 0 0 5px var(--on-color);\n height: 1px;\n width: 1px;\n}\n\n.cyber-switch input:not(:checked) ~ .circuit .circuit-line {\n background: var(--off-color);\n box-shadow: 0 0 5px var(--off-color);\n}\n\n/* Power burst effect */\n.cyber-switch .power-burst {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: radial-gradient(\n circle at center,\n transparent 60%,\n var(--on-color) 100%\n );\n opacity: 0;\n transition: opacity 0.3s;\n pointer-events: none;\n z-index: 0;\n}\n\n.cyber-switch input:active ~ .power-burst {\n opacity: 0.3;\n transition: none;\n}\n"}

rude-deer-80

👁 实时预览

📝 源代码