{"html":"\n \n\n

\n\n

\n\n","css":"/* --- 组件核心样式 (无背景依赖) --- */\n\n/* 1. 开关主容器 */\n.reactor-switch {\n position: relative;\n display: inline-block; /* 确保不占满整行 */\n width: 160px;\n height: 64px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n /* 使用 drop-shadow 替代 box-shadow 处理外部投影，\n 这样在透明或复杂背景上边缘更自然 */\n filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));\n}\n\n/* 隐藏原生 Checkbox */\n.reactor-input {\n display: none;\n}\n\n/* 2. 金属外壳 (Casing) */\n.reactor-casing {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n /* 自身材质颜色：深钛金 */\n background: linear-gradient(180deg, #3a3f4b, #1e2025);\n border-radius: 40px;\n /* 内部光影结构 */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n inset 0 -3px 0 rgba(0, 0, 0, 0.4),\n 0 0 0 2px #1e2025; /* 自身描边，防止在深色背景混淆 */\n\n /* 叠加拉丝金属纹理 */\n background-image: repeating-linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0px,\n rgba(255, 255, 255, 0.02) 1px,\n rgba(255, 255, 255, 0) 2px\n ),\n linear-gradient(180deg, #3a3f4b, #1e2025);\n\n padding: 6px;\n transition: box-shadow 0.3s ease;\n z-index: 1;\n}\n\n/* 3. 内部轨道 (Track) */\n.reactor-track {\n position: relative;\n width: 100%;\n height: 100%;\n background: #0a0a0a; /* 轨道底色 */\n border-radius: 30px;\n box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);\n overflow: hidden;\n}\n\n/* 轨道网格装饰 */\n.reactor-track::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.03) 1px,\n transparent 1px\n );\n background-size: 10px 100%;\n opacity: 0.5;\n}\n\n/* 等离子光束 */\n.plasma-beam {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 0%;\n background: linear-gradient(90deg, rgba(0, 242, 255, 0.6), #00f2ff);\n opacity: 0.5;\n filter: blur(8px); /* 辉光滤镜 */\n transition:\n width 0.5s cubic-bezier(0.7, 0, 0.3, 1),\n opacity 0.4s ease;\n}\n\n/* 4. 机械滑块 (Slider) */\n.reactor-slider {\n position: absolute;\n top: 6px;\n left: 6px;\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: linear-gradient(145deg, #444, #222);\n /* 自身的立体阴影 */\n box-shadow:\n inset 0 1px 1px rgba(255, 255, 255, 0.3),\n 0 2px 5px rgba(0, 0, 0, 0.5),\n 0 0 0 1px #000;\n transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* 散热纹理 */\n.slider-vents {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n border: 4px solid transparent;\n border-top-color: rgba(255, 255, 255, 0.1);\n border-bottom-color: rgba(0, 0, 0, 0.3);\n transform: rotate(45deg);\n}\n\n/* 5. 能量核心 (Core) */\n.reactor-core {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #111;\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);\n position: relative;\n overflow: hidden;\n}\n\n/* 核心内部 */\n.core-inner {\n position: absolute;\n top: 3px;\n left: 3px;\n right: 3px;\n bottom: 3px;\n background: #333;\n border-radius: 50%;\n transition: all 0.5s ease;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n}\n\n/* =========================================\n 交互状态：开启 (Checked)\n ========================================= */\n\n/* 1. 滑块移动 */\n.reactor-input:checked ~ .reactor-casing .reactor-slider {\n transform: translateX(96px); /* 160 - 64 = 96 */\n}\n\n/* 2. 激活光束 */\n.reactor-input:checked ~ .reactor-casing .plasma-beam {\n width: 100%;\n opacity: 1;\n animation: beam-pulse 1.5s infinite alternate;\n}\n\n/* 3. 核心点火 */\n.reactor-input:checked ~ .reactor-casing .reactor-slider .core-inner {\n background: #fff;\n box-shadow:\n 0 0 10px #00f2ff,\n 0 0 20px #00f2ff,\n inset 0 0 5px #00f2ff;\n}\n\n/* 4. 核心旋转 */\n.reactor-input:checked ~ .reactor-casing .reactor-slider .reactor-core {\n animation: core-spin 2s linear infinite;\n border-color: rgba(0, 242, 255, 0.5);\n}\n\n/* 5. 外壳环境光反射 */\n.reactor-input:checked ~ .reactor-casing {\n /* 增加蓝色外发光，模拟能量溢出 */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n 0 0 25px rgba(0, 242, 255, 0.2);\n}\n\n/* --- 关键帧动画 --- */\n@keyframes beam-pulse {\n 0% {\n opacity: 0.8;\n filter: blur(6px);\n }\n 100% {\n opacity: 1;\n filter: blur(9px);\n box-shadow: 0 0 15px #00f2ff;\n }\n}\n\n@keyframes core-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* --- 触摸反馈 --- */\n.reactor-switch:active .reactor-slider {\n transform: scale(0.96);\n}\n.reactor-input:checked:active ~ .reactor-casing .reactor-slider {\n transform: translateX(96px) scale(0.96);\n}\n"}

thin-duck-60

👁 实时预览

📝 源代码