{"html":"\n","css":"/* hide input */\n.reactor-widget .reactor-switch input {\n display: none;\n}\n\n/* track / shell */\n.reactor-widget .reactor-switch label {\n width: 120px; /* PERFECT MINI SIZE */\n height: 55px;\n position: relative;\n display: block;\n cursor: pointer;\n border-radius: 999px;\n overflow: hidden;\n isolation: isolate;\n\n background: linear-gradient(180deg, #0e1322 0%, #070a14 100%);\n border: 1px solid #ffffff10;\n\n box-shadow:\n inset 0 8px 20px #000a,\n inset 0 1px 0 #ffffff08,\n 0 10px 28px #0007;\n\n transition: 600ms cubic-bezier(0.15, 0.95, 0.18, 1);\n}\n\n/* outer rim */\n.reactor-widget .reactor-switch label::before {\n content: \"\";\n position: absolute;\n inset: 2px;\n border-radius: 999px;\n box-shadow:\n inset 0 0 0 1px #ffffff08,\n inset 0 -4px 10px #000b,\n inset 0 4px 10px #ffffff05;\n z-index: 0;\n}\n\n/* inner core */\n.reactor-widget .reactor-switch__core {\n position: absolute;\n inset: 6px;\n border-radius: 999px;\n background: radial-gradient(110px 70px at 18% 50%, #ffffff0c, transparent 60%),\n radial-gradient(120px 80px at 82% 50%, #00000080, transparent 65%),\n linear-gradient(90deg, #2d3446, #151b2b);\n box-shadow:\n inset 0 0 0 1px #ffffff06,\n inset 0 0 18px #000b;\n transition: 600ms cubic-bezier(0.15, 0.95, 0.18, 1);\n z-index: 1;\n}\n\n/* energy beam */\n.reactor-widget .reactor-switch__beam {\n position: absolute;\n inset: -60% -30%;\n background: conic-gradient(\n from 110deg,\n transparent 0 18%,\n #00f0ff18 26%,\n transparent 40% 55%,\n #7bffb518 66%,\n transparent 78% 100%\n );\n filter: blur(20px);\n opacity: 0.22;\n animation: reactorBeam 6s linear infinite;\n z-index: 0;\n}\n\n@keyframes reactorBeam {\n to {\n transform: translateX(18%) rotate(360deg);\n }\n}\n\n/* thumb */\n.reactor-widget .reactor-switch__thumb {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 45px;\n height: 45px;\n border-radius: 50%;\n z-index: 3;\n\n background: radial-gradient(\n circle at 25% 20%,\n #ffffff 0%,\n #eaf6ff 45%,\n #b4d7ea 100%\n );\n\n box-shadow:\n 0 8px 16px #0009,\n inset 0 3px 8px #ffffff,\n inset -6px -9px 14px #90b3c666;\n\n transition: 600ms cubic-bezier(0.15, 0.95, 0.18, 1);\n}\n\n/* inner lens */\n.reactor-widget .reactor-switch__thumb::before {\n content: \"\";\n position: absolute;\n inset: 5px;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 25%, #ffffff66, transparent 55%),\n radial-gradient(circle at 75% 80%, #00000066, transparent 60%);\n box-shadow: inset 0 0 0 1px #ffffff20;\n}\n\n/* glow tail */\n.reactor-widget .reactor-switch__thumb::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 80px;\n height: 80px;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle, #00f0ff22 0%, transparent 60%),\n radial-gradient(circle, #7bffb522 0%, transparent 65%);\n filter: blur(12px);\n opacity: 0;\n transition: 600ms ease;\n}\n\n/* OFF / ON text */\n.reactor-widget .reactor-switch__state {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n font-weight: 800;\n letter-spacing: 0.2em;\n font-size: 10px;\n user-select: none;\n z-index: 2;\n transition: 600ms ease;\n}\n\n.reactor-widget .reactor-switch__state--off {\n right: 16px;\n color: #c7d0e0b5;\n}\n.reactor-widget .reactor-switch__state--on {\n left: 16px;\n color: #001116;\n opacity: 0;\n}\n\n/* ON STATE */\n.reactor-widget .reactor-switch input:checked + label {\n border-color: #ffffff20;\n box-shadow:\n 0 0 14px #00f0ff33,\n 0 0 30px #7bffb533,\n inset 0 8px 18px #ffffff18,\n 0 10px 28px #0009;\n}\n\n.reactor-widget .reactor-switch input:checked + label .reactor-switch__core {\n background: linear-gradient(90deg, #00f0ff, #7bffb5, #6a7dff);\n box-shadow:\n inset 0 0 0 1px #ffffff18,\n inset 0 0 20px #00f0ff44;\n}\n\n/* move thumb */\n.reactor-widget .reactor-switch input:checked + label .reactor-switch__thumb {\n left: 70px; /* PERFECT for width=120px */\n background: radial-gradient(\n circle at 30% 25%,\n #062a33 0%,\n #03161c 55%,\n #000b12 100%\n );\n box-shadow:\n 0 8px 18px #000c,\n 0 0 14px #00f0ff55,\n inset 0 0 12px #00f0ff66,\n inset -6px -9px 16px #00ffd455;\n}\n\n.reactor-widget\n .reactor-switch\n input:checked\n + label\n .reactor-switch__thumb::after {\n opacity: 1;\n}\n\n/* switch text visibility */\n.reactor-widget\n .reactor-switch\n input:checked\n + label\n .reactor-switch__state--off {\n opacity: 0;\n}\n.reactor-widget\n .reactor-switch\n input:checked\n + label\n .reactor-switch__state--on {\n opacity: 1;\n}\n\n/* focus */\n.reactor-widget .reactor-switch input:focus-visible + label {\n outline: 2px solid #ffffff44;\n outline-offset: 4px;\n}\n"}

shaggy-wasp-35

👁 实时预览

📝 源代码