{"html":"\n\n

\n\n","css":".toggle-container {\n position: relative;\n width: 120px;\n height: 60px;\n background: linear-gradient(\n 135deg,\n rgba(200, 200, 200, 0.8) 0%,\n rgba(108, 106, 106, 0.8) 50%,\n rgba(142, 141, 141, 0.8) 100%\n ),\n url('data:image/svg+xml;utf8,');\n border-radius: 30px;\n box-shadow:\n inset 0 2px 4px rgba(255, 255, 255, 0.5),\n inset 0 -2px 4px rgba(0, 0, 0, 0.2),\n 0 4px 8px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n transition: all 0.4s ease;\n}\n\n/* Toggle track - rubber texture */\n.toggle-container::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n bottom: 5px;\n background: #434141ac;\n border-radius: 30px;\n box-shadow:\n inset 0 2px 4px rgba(255, 255, 255, 0.1),\n inset 0 -2px 4px rgba(0, 0, 0, 0.5);\n transition: all 0.4s ease;\n}\n\n/* Toggle knob - polished metal */\n.toggle-knob {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 50px;\n height: 50px;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.4) 0%,\n rgba(220, 220, 220, 0.6) 30%,\n rgba(180, 180, 180, 0.9) 100%\n ),\n url('data:image/svg+xml;utf8,');\n border-radius: 50%;\n box-shadow:\n 0 2px 4px rgba(0, 0, 0, 0.3),\n inset 0 1px 2px rgba(255, 255, 255, 0.5);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n z-index: 2;\n}\n\n/* Knob screw detail */\n.toggle-knob::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 10px;\n height: 10px;\n background: #444;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow:\n inset 0 1px 2px rgba(0, 0, 0, 0.5),\n 0 0 0 2px rgba(0, 0, 0, 0.2);\n}\n\n/* Active state */\n#toggle:checked ~ .toggle-container .toggle-knob {\n transform: translateX(60px);\n}\n\n#toggle:checked ~ .toggle-container::before {\n background: #07a00c;\n box-shadow:\n inset 0 2px 4px rgba(255, 255, 255, 0.2),\n inset 0 -2px 4px rgba(0, 0, 0, 0.3),\n 0 0 10px rgba(76, 175, 80, 0.5);\n}\n\n/* Hidden checkbox */\n#toggle {\n display: none;\n}\n\n/* Physical press effect */\n.toggle-container:active .toggle-knob {\n transform: scale(0.9);\n}\n#toggle:checked ~ .toggle-container:active .toggle-knob {\n transform: translateX(60px) scale(0.9);\n}\n"}

massive-penguin-48

👁 实时预览

📝 源代码