{"html":"

\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n

\n","css":"/* Container Layout */\n.cyber-signboard {\n /* System Design Variables */\n --primary-glow: #00f0ff;\n --secondary-glow: #7000ff;\n --inactive-color: #5c6b7f;\n --bg-dark: #0f1016;\n --switch-width: 280px;\n --switch-height: 80px;\n --padding: 6px;\n\n --item-width: calc((var(--switch-width) - (var(--padding) * 2)) / 3);\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n font-family: sans-serif;\n}\n\n.cyber-switch {\n position: relative;\n width: var(--switch-width);\n height: var(--switch-height);\n background: var(--bg-dark);\n border-radius: 20px;\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 20px 40px -10px rgba(0, 0, 0, 0.6);\n display: flex;\n align-items: center;\n padding: var(--padding);\n box-sizing: border-box;\n overflow: hidden;\n border: 1px solid #1f222e;\n}\n\n.cyber-switch input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.cyber-label {\n flex: 1;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n z-index: 2;\n position: relative;\n border-radius: 14px;\n transition: all 0.3s ease;\n -webkit-tap-highlight-color: transparent;\n}\n\n/* Icons Style */\n.cyber-label .icon {\n width: 28px;\n height: 28px;\n color: var(--inactive-color);\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));\n}\n\n/* The Sliding Highlight */\n.cyber-highlight {\n position: absolute;\n top: var(--padding);\n left: var(--padding);\n width: var(--item-width);\n height: calc(var(--switch-height) - (var(--padding) * 2));\n background: transparent;\n z-index: 1;\n transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n pointer-events: none;\n}\n\n.highlight-inner {\n width: 100%;\n height: 100%;\n border-radius: 14px;\n background: linear-gradient(\n 145deg,\n rgba(255, 255, 255, 0.1) 0%,\n rgba(255, 255, 255, 0.02) 100%\n );\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-shadow:\n 0 0 20px var(--primary-glow),\n inset 0 0 15px rgba(0, 240, 255, 0.2);\n backdrop-filter: blur(4px);\n position: relative;\n}\n\n.highlight-inner::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 10%;\n width: 80%;\n height: 1px;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.8),\n transparent\n );\n opacity: 0.8;\n}\n\n/* Interaction Logic */\n/* State 1 */\n#cyber-opt-1:checked ~ .cyber-highlight {\n transform: translateX(0%);\n}\n#cyber-opt-1:checked ~ [for=\"cyber-opt-1\"] .icon {\n color: #fff;\n filter: drop-shadow(0 0 8px var(--primary-glow));\n transform: scale(1.1);\n}\n\n/* State 2 */\n#cyber-opt-2:checked ~ .cyber-highlight {\n transform: translateX(100%);\n}\n#cyber-opt-2:checked ~ [for=\"cyber-opt-2\"] .icon {\n color: #fff;\n filter: drop-shadow(0 0 8px var(--primary-glow));\n transform: scale(1.1);\n}\n\n/* State 3 */\n#cyber-opt-3:checked ~ .cyber-highlight {\n transform: translateX(200%);\n}\n#cyber-opt-3:checked ~ [for=\"cyber-opt-3\"] .icon {\n color: #fff;\n filter: drop-shadow(0 0 8px var(--primary-glow));\n transform: scale(1.1);\n}\n\n/* Focus States for Accessibility */\n.cyber-switch input:focus-visible ~ .cyber-highlight .highlight-inner {\n border: 1px solid #fff;\n box-shadow: 0 0 30px var(--primary-glow);\n}\n\n.cyber-label:hover .icon {\n color: #aeb9cc;\n}\n\n.cyber-label:active .icon {\n transform: scale(0.95);\n}\n\n.glare {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 14px;\n background: radial-gradient(\n circle at 50% -20%,\n rgba(255, 255, 255, 0.1),\n transparent 60%\n );\n opacity: 0;\n transition: opacity 0.3s;\n}\n.cyber-label:hover .glare {\n opacity: 1;\n}\n\n@keyframes neon-pulse {\n 0%,\n 100% {\n box-shadow:\n 0 0 20px var(--primary-glow),\n inset 0 0 15px rgba(0, 240, 255, 0.2);\n }\n 50% {\n box-shadow:\n 0 0 25px var(--primary-glow),\n inset 0 0 20px rgba(0, 240, 255, 0.3);\n }\n}\n\n.highlight-inner {\n animation: neon-pulse 3s infinite ease-in-out;\n}\n"}

red-sheep-38

👁 实时预览

📝 源代码