{"html":"

\n \n \n

\n \n \n \n

\n \n\n","css":".cyber-toggle {\n --hue: 180;\n --core-size: 80px;\n display: inline-block;\n padding: 2rem;\n background: #0a0a12;\n border-radius: 35px;\n position: relative;\n overflow: hidden;\n transition: transform 0.3s ease-in-out;\n}\n\n.cyber-toggle:hover {\n -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);\n transform: perspective(100px) rotateX(5deg) rotateY(-5deg);\n}\n\n.cyber-input {\n position: absolute;\n opacity: 0;\n}\n\n.cyber-label {\n display: block;\n cursor: pointer;\n width: var(--core-size);\n height: calc(var(--core-size) / 2);\n position: relative;\n transition: filter 0.3s ease;\n}\n\n.cyber-core {\n position: relative;\n width: 100%;\n height: 100%;\n background: #1a1a2f;\n border-radius: 40px;\n transition: all 0.4s ease;\n overflow: hidden;\n box-shadow:\n inset 0 4px 12px rgba(255, 255, 255, 0.1),\n inset 0 -4px 12px rgba(0, 0, 0, 0.4);\n}\n\n.cyber-toggle-circle {\n position: absolute;\n width: calc(var(--core-size) / 2 - 8px);\n height: calc(var(--core-size) / 2 - 8px);\n background: #ffffff;\n border-radius: 50%;\n top: 4px;\n left: 4px;\n transition: transform 0.4s ease;\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.3),\n inset 0 1px 2px rgba(255, 255, 255, 0.8);\n}\n\n.cyber-power-line {\n position: absolute;\n width: calc(var(--core-size) * 1.14159 + 4rem);\n height: 2px;\n background: linear-gradient(\n 135deg,\n hsl(280, 80%, 40%),\n hsl(320, 70%, 50%),\n hsl(340, 85%, 45%)\n );\n\n top: 50%;\n left: calc(-1 * (var(--core-size) + 2rem));\n transform: translateY(-220%);\n opacity: 0;\n pointer-events: none;\n}\n\n.cyber-power-ring {\n position: absolute;\n inset: -2px;\n outline: 3px solid transparent;\n border-radius: 12px;\n opacity: 0;\n transform: scale(1);\n pointer-events: none;\n box-shadow: 0 0 6px transparent; /* glow */\n background: linear-gradient(\n to right,\n rgba(99, 49, 49, 0.2) 0%,\n rgba(31, 28, 212, 0.2) 15%,\n rgba(64, 6, 112, 0.2) 30%,\n rgba(131, 33, 161, 0.2) 45%,\n rgba(132, 14, 179, 0.2) 60%,\n rgba(255, 0, 242, 0.2) 100%\n );\n\n background-size: 200% 100%; /* smooth*/\n}\n\n.cyber-input:checked ~ .cyber-label .cyber-core {\n background: #242444;\n box-shadow:\n inset 0 4px 24px rgba(255, 255, 255, 0.2),\n inset 0 -4px 12px rgba(0, 0, 0, 0.6),\n 0 0 8px rgba(79, 78, 78, 0.6);\n}\n\n.cyber-input:checked ~ .cyber-label .cyber-toggle-circle {\n transform: translateX(calc(var(--core-size) / 2));\n}\n\n.cyber-input:checked + .cyber-label .cyber-power-line {\n animation: power-line-in 0.6s ease forwards;\n}\n\n.cyber-input:checked + .cyber-label .cyber-power-ring {\n animation:\n power-ring-appear 0.6s ease 0.3s forwards,\n ring-glow 2.5s linear infinite 0.9s;\n}\n\n.cyber-input:checked + .cyber-label .cyber-power-ring .ring-particle {\n animation: ring-particle-fly 1s ease-out infinite var(--delay);\n}\n\n.cyber-input:not(:checked) + .cyber-label .cyber-power-ring {\n animation: power-ring-break 0.8s ease forwards;\n}\n\n/* Particles from border */\n.cyber-power-ring .ring-particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #ffffff;\n border-radius: 50%;\n opacity: 0;\n left: var(--x);\n top: var(--y);\n}\n\n/* Animation */\n@keyframes power-line-in {\n 0% {\n opacity: 1;\n transform: translateY(-50%) translateX(-100%);\n }\n 50% {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-50%) translateX(100%);\n }\n}\n\n@keyframes power-ring-appear {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n 50% {\n opacity: 1;\n transform: scale(1.1);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes ring-glow {\n 0% {\n background-position: 0% 0;\n box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);\n }\n 50% {\n background-position: 100% 0;\n box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n }\n 100% {\n background-position: 200% 0;\n box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);\n }\n}\n\n@keyframes power-ring-break {\n 0% {\n opacity: 1;\n clip-path: inset(0 0 0 0);\n }\n 25% {\n clip-path: inset(0 25% 0 25%);\n }\n 50% {\n clip-path: inset(25% 25% 25% 25%);\n }\n 75% {\n clip-path: inset(40% 40% 40% 40%);\n }\n 100% {\n opacity: 0;\n clip-path: inset(50% 50% 50% 50%);\n }\n}\n\n@keyframes ring-particle-fly {\n 0% {\n opacity: 1;\n transform: translate(0, 0);\n }\n 100% {\n opacity: 0;\n transform: translate(var(--px), var(--py));\n }\n}\n\n/* Particle :D*/\n.cyber-particles {\n position: absolute;\n inset: 0;\n}\n\n.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: hsl(var(--hue), 100%, 70%);\n border-radius: 50%;\n opacity: 0;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.cyber-input:checked ~ .cyber-label .particle {\n animation: particle-fly 0.8s ease-out forwards;\n}\n\n@keyframes particle-fly {\n 0% {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n 100% {\n opacity: 0;\n transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));\n }\n}\n\n.particle:nth-child(1) {\n --dx: 20px;\n --dy: -20px;\n}\n.particle:nth-child(2) {\n --dx: -15px;\n --dy: 25px;\n}\n.particle:nth-child(3) {\n --dx: 25px;\n --dy: 15px;\n}\n.particle:nth-child(4) {\n --dx: -20px;\n --dy: -15px;\n}\n.particle:nth-child(5) {\n --dx: 0px;\n --dy: -30px;\n}\n\n.cyber-label:hover .cyber-core {\n transform: scale(1.05);\n filter: brightness(1.2);\n box-shadow:\n inset 0 4px 24px rgba(255, 255, 255, 0.3),\n inset 0 -4px 12px rgba(0, 0, 0, 0.5);\n}\n\n.cyber-input:active ~ .cyber-label .cyber-core {\n transform: scale(0.95);\n}\n\n.cyber-input:focus-visible ~ .cyber-label .cyber-core {\n outline: 2px solid hsl(var(--hue), 100%, 50%);\n outline-offset: 4px;\n}\n\n.cyber-glare {\n position: absolute;\n width: 50%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.1) 0%,\n transparent 100%\n );\n transform: skewX(-20deg);\n filter: blur(2px);\n}\n\n.cyber-toggle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: linear-gradient(\n rgba(255, 255, 255, 0.02) 1px,\n transparent 1px\n ),\n linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\n background-size: 20px 20px;\n mix-blend-mode: overlay;\n}\n"}

fuzzy-quail-99

👁 实时预览

📝 源代码