{"html":"\n \n

\n\n","css":".mechanical-toggle {\n --bg-color: #e0e5ec;\n --accent-emerald: #2ecc71;\n --old-tech-blue: #3498db;\n --off-color: #94a3b8;\n --container-w: 80px;\n --container-h: 40px;\n --thumb-size: 32px;\n --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n --shadow-out: 6px 6px 12px #b8bec9, -6px -6px 12px #ffffff;\n --shadow-in: inset 2px 2px 5px #b8bec9, inset -2px -2px 5px #ffffff;\n position: relative;\n display: inline-block;\n width: var(--container-w);\n height: var(--container-h);\n cursor: pointer;\n}\n.mechanical-toggle input {\n display: none;\n}\n.slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--bg-color);\n border-radius: 50px;\n box-shadow: var(--shadow-in);\n transition: var(--transition);\n border: 1px solid rgba(255, 255, 255, 0.5);\n overflow: hidden;\n}\n\n.slider::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 15px;\n width: 50px;\n height: 1px;\n background: rgba(0, 0, 0, 0.05);\n box-shadow:\n 0 4px 0 rgba(0, 0, 0, 0.05),\n 0 -4px 0 rgba(0, 0, 0, 0.05);\n transform: translateY(-50%);\n transition: var(--transition);\n z-index: 0;\n}\n\n.thumb {\n position: absolute;\n height: var(--thumb-size);\n width: var(--thumb-size);\n left: 4px;\n top: 50%;\n transform: translateY(-50%);\n background-color: var(--bg-color);\n border-radius: 50%;\n box-shadow: var(--shadow-out);\n transition: var(--transition);\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid rgba(255, 255, 255, 0.8);\n}\n\n.thumb::after {\n content: \"\";\n width: 6px;\n height: 6px;\n background: var(--off-color);\n border-radius: 50%;\n box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);\n transition: var(--transition);\n}\n\n.thumb-details::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 0.5px dashed rgba(0, 0, 0, 0.1);\n}\n.glow {\n position: absolute;\n width: 40px;\n height: 40px;\n background: var(--accent-emerald);\n filter: blur(15px);\n opacity: 0;\n transition: var(--transition);\n left: 0;\n top: 0;\n}\n\n.mechanical-toggle input:checked + .slider::before {\n background: var(--old-tech-blue);\n box-shadow:\n 0 4px 0 var(--old-tech-blue),\n 0 -4px 0 var(--old-tech-blue);\n filter: drop-shadow(0 0 2px rgba(52, 152, 219, 0.5));\n}\n.mechanical-toggle input:checked + .slider .thumb {\n left: calc(var(--container-w) - var(--thumb-size) - 4px);\n border-color: rgba(46, 204, 113, 0.3);\n}\n.mechanical-toggle input:checked + .slider .thumb::after {\n background: var(--accent-emerald);\n box-shadow: 0 0 8px var(--accent-emerald);\n}\n.mechanical-toggle input:checked + .slider {\n box-shadow:\n inset 2px 2px 5px #b8bec9,\n inset -2px -2px 5px #ffffff,\n 0 0 15px rgba(46, 204, 113, 0.2);\n}\n\n.mechanical-toggle input:checked + .slider .glow {\n opacity: 0.15;\n left: 40px;\n}\n.mechanical-toggle:hover .thumb {\n box-shadow:\n 4px 4px 8px #b8bec9,\n -4px -4px 8px #ffffff;\n}\n\n.mechanical-toggle:active .thumb {\n transform: translateY(-50%) scale(0.95);\n box-shadow: var(--shadow-in);\n}\n"}

nice-donkey-44

👁 实时预览

📝 源代码