{"html":"\n \n

\n \n

\n OFF\n

\n ON\n

\n \n \n \n \n

\n\n","css":".ux-vault-toggle {\n --color-slate-base: #1e2124;\n --color-slate-dark: #111315;\n --color-slate-light: #2c3035;\n --color-amber: #f59e0b;\n --color-emerald: #10b981;\n --color-text-dim: #6b7280;\n --track-w: 140px;\n --track-h: 60px;\n --thumb-size: 50px;\n display: inline-block;\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n\n.ux-vault-toggle__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n}\n\n.ux-vault-toggle__wrapper {\n width: var(--track-w);\n height: var(--track-h);\n position: relative;\n border-radius: 40px;\n background: var(--color-slate-base);\n box-shadow:\n 0 0 0 2px var(--color-slate-dark),\n 0 8px 24px rgba(0, 0, 0, 0.6);\n isolation: isolate;\n}\n\n.ux-vault-toggle__filter {\n position: absolute;\n pointer-events: none;\n}\n\n.ux-vault-toggle__track {\n position: absolute;\n inset: 2px;\n border-radius: 38px;\n background: var(--color-slate-dark);\n box-shadow:\n inset 0 8px 16px rgba(0, 0, 0, 0.9),\n inset 0 3px 6px rgba(0, 0, 0, 0.7),\n inset 0 -2px 4px rgba(255, 255, 255, 0.03);\n overflow: hidden;\n display: flex;\n align-items: center;\n}\n\n.ux-vault-toggle__texture {\n position: absolute;\n inset: 0;\n background: var(--color-slate-dark);\n filter: url(#ux-metal-noise);\n opacity: 0.6;\n mix-blend-mode: overlay;\n pointer-events: none;\n}\n\n.ux-vault-toggle__circuit {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n}\n\n.ux-circuit-path {\n fill: none;\n stroke-width: 2;\n stroke-dasharray: 100;\n stroke-linecap: round;\n transition:\n stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1),\n stroke 0.6s ease;\n}\n\n.ux-circuit--off {\n stroke: var(--color-amber);\n stroke-dashoffset: 0;\n opacity: 0.4;\n}\n\n.ux-circuit--on {\n stroke: var(--color-emerald);\n stroke-dashoffset: 100;\n opacity: 0.4;\n}\n\n.ux-vault-toggle__status {\n position: absolute;\n font-family:\n system-ui,\n -apple-system,\n sans-serif;\n font-weight: 800;\n font-size: 14px;\n letter-spacing: 2px;\n display: flex;\n z-index: 2;\n}\n\n.ux-vault-toggle__status span {\n display: inline-block;\n transition:\n transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),\n opacity 0.4s ease,\n color 0.4s ease;\n transition-delay: calc(var(--i) * 0.05s);\n}\n\n.ux-vault-toggle__status--off {\n right: 24px;\n color: var(--color-amber);\n text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);\n}\n\n.ux-vault-toggle__status--on {\n left: 24px;\n color: var(--color-emerald);\n text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);\n}\n\n.ux-vault-toggle__status--on span {\n opacity: 0;\n transform: translateY(15px) scale(0.8);\n color: var(--color-text-dim);\n}\n\n.ux-vault-toggle__thumb {\n position: absolute;\n top: 5px;\n left: 5px;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background: linear-gradient(\n 145deg,\n var(--color-slate-light),\n var(--color-slate-base)\n );\n box-shadow:\n 0 8px 16px rgba(0, 0, 0, 0.6),\n 0 4px 8px rgba(0, 0, 0, 0.5),\n inset 0 2px 4px rgba(255, 255, 255, 0.15),\n inset 0 -3px 6px rgba(0, 0, 0, 0.5);\n z-index: 3;\n transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.ux-vault-toggle__thumb-ring {\n position: absolute;\n inset: 2px;\n border-radius: 50%;\n background: linear-gradient(to bottom, #3a3f46, #1a1d21);\n box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8);\n z-index: 1;\n}\n\n.ux-vault-toggle__thumb-core {\n position: absolute;\n inset: 8px;\n border-radius: 50%;\n background: var(--color-slate-dark);\n border: 2px solid var(--color-amber);\n box-shadow:\n inset 0 0 10px rgba(245, 158, 11, 0.3),\n 0 0 15px rgba(245, 158, 11, 0.4);\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n border-color 0.6s ease,\n box-shadow 0.6s ease;\n}\n\n.ux-thumb-icon {\n width: 18px;\n height: 18px;\n color: var(--color-amber);\n transition:\n color 0.6s ease,\n transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.ux-vault-toggle__thumb-glare {\n position: absolute;\n top: 2px;\n left: 10%;\n width: 80%;\n height: 40%;\n border-radius: 50%;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.15),\n transparent\n );\n z-index: 4;\n pointer-events: none;\n}\n\n.ux-vault-toggle__input:checked\n ~ .ux-vault-toggle__wrapper\n .ux-vault-toggle__thumb {\n transform: translateX(80px);\n}\n\n.ux-vault-toggle__input:checked\n ~ .ux-vault-toggle__wrapper\n .ux-vault-toggle__thumb-core {\n border-color: var(--color-emerald);\n box-shadow:\n inset 0 0 12px rgba(16, 185, 129, 0.4),\n 0 0 20px rgba(16, 185, 129, 0.5);\n}\n\n.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-thumb-icon {\n color: var(--color-emerald);\n transform: rotate(180deg) scale(1.1);\n}\n\n.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-circuit--off {\n stroke-dashoffset: -100;\n opacity: 0;\n}\n\n.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-circuit--on {\n stroke-dashoffset: 0;\n opacity: 0.8;\n}\n\n.ux-vault-toggle__input:checked\n ~ .ux-vault-toggle__wrapper\n .ux-vault-toggle__status--off\n span {\n opacity: 0;\n transform: translateY(-15px) scale(0.8);\n color: var(--color-text-dim);\n}\n\n.ux-vault-toggle__input:checked\n ~ .ux-vault-toggle__wrapper\n .ux-vault-toggle__status--on\n span {\n opacity: 1;\n transform: translateY(0) scale(1);\n color: var(--color-emerald);\n}\n\n.ux-vault-toggle:hover .ux-vault-toggle__thumb-core {\n box-shadow:\n inset 0 0 15px rgba(245, 158, 11, 0.5),\n 0 0 25px rgba(245, 158, 11, 0.6);\n}\n\n.ux-vault-toggle__input:checked:hover\n ~ .ux-vault-toggle__wrapper\n .ux-vault-toggle__thumb-core {\n box-shadow:\n inset 0 0 15px rgba(16, 185, 129, 0.6),\n 0 0 25px rgba(16, 185, 129, 0.7);\n}\n\n.ux-vault-toggle:active .ux-vault-toggle__thumb {\n transform: scale(0.95);\n}\n\n.ux-vault-toggle__input:checked:active\n ~ .ux-vault-toggle__wrapper\n .ux-vault-toggle__thumb {\n transform: translateX(80px) scale(0.95);\n}\n"}

silly-insect-64

👁 实时预览

📝 源代码