{"html":"\n \n

\n\n","css":".premium-toggle {\n --toggle-size: 3.5em;\n --toggle-padding: 0.4em;\n --handle-size: 2.2em;\n --track-height: 1em;\n\n --off-light: #e2e8f0;\n --off-dark: #94a3b8;\n --off-shadow: #64748b;\n\n --on-primary: #3f5efb;\n --on-secondary: #fc466b;\n --on-highlight: #5e72eb;\n --on-shadow: #333;\n\n position: relative;\n display: inline-block;\n width: calc(var(--toggle-size) * 2);\n height: var(--toggle-size);\n user-select: none;\n}\n\n.premium-toggle input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.switch {\n position: absolute;\n inset: 0;\n cursor: pointer;\n}\n\n.track {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: var(--track-height);\n transform: translateY(-50%);\n border-radius: var(--track-height);\n background: linear-gradient(to bottom, var(--off-light), var(--off-dark));\n box-shadow:\n 0 0.05em 0.1em rgba(0, 0, 0, 0.1) inset,\n 0 -0.05em 0.1em rgba(255, 255, 255, 0.1) inset,\n 0 0.1em 0.2em rgba(0, 0, 0, 0.2);\n transition: all 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);\n overflow: hidden;\n}\n\n.track-shadow {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.1)\n );\n opacity: 0.5;\n transition: opacity 0.4s ease;\n}\n\n.premium-toggle input:checked ~ .switch .track {\n background: linear-gradient(to right, var(--on-primary), var(--on-secondary));\n box-shadow:\n 0 0.05em 0.1em rgba(0, 0, 0, 0.2) inset,\n 0 -0.05em 0.1em rgba(255, 255, 255, 0.1) inset,\n 0 0.1em 0.5em rgba(63, 94, 251, 0.5);\n}\n\n.premium-toggle input:checked ~ .switch .track-shadow {\n opacity: 0.7;\n}\n\n.magnetic-field {\n position: absolute;\n inset: -50%;\n border-radius: 50%;\n background: radial-gradient(\n ellipse at center,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 0) 70%,\n rgba(255, 255, 255, 0.2) 100%\n );\n opacity: 0;\n transform: scale(0.5);\n pointer-events: none;\n transition:\n opacity 0.6s ease,\n transform 0.6s ease;\n}\n\n.premium-toggle input:checked ~ .switch .magnetic-field {\n opacity: 1;\n transform: scale(1);\n}\n\n.handle-container {\n position: absolute;\n top: 50%;\n left: var(--toggle-padding);\n width: var(--handle-size);\n height: var(--handle-size);\n transform: translateY(-50%);\n transition: all 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);\n}\n\n.premium-toggle input:checked ~ .switch .handle-container {\n left: calc(100% - var(--handle-size) - var(--toggle-padding));\n}\n\n.handle {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: linear-gradient(145deg, var(--off-light), var(--off-dark));\n box-shadow:\n 0.15em 0.15em 0.3em var(--off-shadow),\n -0.1em -0.1em 0.2em rgba(255, 255, 255, 0.8);\n transition: all 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);\n overflow: hidden;\n}\n\n.premium-toggle input:checked ~ .switch .handle {\n background: linear-gradient(145deg, var(--on-highlight), var(--on-primary));\n box-shadow:\n 0.15em 0.15em 0.3em var(--on-shadow),\n -0.1em -0.1em 0.2em rgba(255, 255, 255, 0.2),\n 0 0 0.5em rgba(63, 94, 251, 0.5);\n}\n\n.handle-inner {\n position: absolute;\n inset: 0.1em;\n border-radius: 50%;\n background: linear-gradient(145deg, var(--off-light) 30%, var(--off-dark));\n transition: all 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);\n overflow: hidden;\n}\n\n.premium-toggle input:checked ~ .switch .handle-inner {\n background: linear-gradient(\n 145deg,\n var(--on-highlight) 30%,\n var(--on-primary)\n );\n}\n\n.handle-shine {\n position: absolute;\n top: 0.1em;\n left: 0.1em;\n width: 40%;\n height: 40%;\n border-radius: 50%;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.8),\n rgba(255, 255, 255, 0)\n );\n opacity: 0.8;\n transition: all 0.4s ease;\n}\n\n.premium-toggle input:checked ~ .switch .handle-shine {\n opacity: 0.4;\n transform: scale(0.7) translate(0.1em, 0.1em);\n}\n\n.handle-texture {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.1) 0%,\n rgba(255, 255, 255, 0) 8%\n ),\n radial-gradient(\n circle at 70% 70%,\n rgba(0, 0, 0, 0.1) 0%,\n rgba(0, 0, 0, 0) 8%\n );\n background-size: 0.8em 0.8em;\n opacity: 0.3;\n}\n\n.handle-ripple {\n position: absolute;\n inset: -20%;\n border-radius: 50%;\n border: 0.2em solid rgba(255, 255, 255, 0.5);\n opacity: 0;\n transform: scale(0);\n pointer-events: none;\n}\n\n.premium-toggle input:checked ~ .switch .handle-ripple {\n animation: ripple 0.6s ease-out;\n}\n\n@keyframes ripple {\n 0% {\n opacity: 0.7;\n transform: scale(0);\n }\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n}\n\n.sun-moon {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n overflow: hidden;\n transition: all 0.6s cubic-bezier(0.3, 1.5, 0.7, 1);\n}\n\n.ray {\n position: absolute;\n background-color: #f59e0b;\n width: 0.2em;\n height: 0.8em;\n left: 50%;\n top: 50%;\n opacity: 1;\n transform-origin: bottom center;\n transition: all 0.4s ease 0.1s;\n}\n\n.ray1 {\n transform: translate(-50%, -120%) rotate(0deg);\n}\n.ray2 {\n transform: translate(-50%, -120%) rotate(45deg);\n}\n.ray3 {\n transform: translate(-50%, -120%) rotate(90deg);\n}\n.ray4 {\n transform: translate(-50%, -120%) rotate(135deg);\n}\n\n.premium-toggle input:checked ~ .switch .ray {\n opacity: 0;\n transform: translate(-50%, -120%) rotate(180deg);\n}\n\n.crater {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.crater1 {\n width: 0.3em;\n height: 0.3em;\n top: 30%;\n left: 30%;\n}\n\n.crater2 {\n width: 0.2em;\n height: 0.2em;\n top: 60%;\n left: 60%;\n}\n\n.crater3 {\n width: 0.25em;\n height: 0.25em;\n top: 40%;\n left: 70%;\n}\n\n.premium-toggle input:checked ~ .switch .crater {\n opacity: 1;\n transition: opacity 0.4s ease 0.2s;\n}\n\n.wave-group {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n transform: scale(0);\n overflow: hidden;\n transition: transform 0.4s ease;\n}\n\n.premium-toggle input:checked ~ .switch .wave-group {\n transform: scale(1);\n}\n\n.wave {\n position: absolute;\n left: -50%;\n right: -50%;\n height: 200%;\n background: linear-gradient(\n 90deg,\n rgba(252, 70, 107, 0) 0%,\n rgba(252, 70, 107, 0.3) 50%,\n rgba(63, 94, 251, 0.3) 50%,\n rgba(63, 94, 251, 0) 100%\n );\n opacity: 0;\n transform: translateY(100%);\n}\n\n.premium-toggle input:checked ~ .switch .wave {\n animation: wave 1.5s linear infinite;\n opacity: 0.3;\n}\n\n.wave2 {\n animation-delay: 0.5s !important;\n}\n\n.wave3 {\n animation-delay: 1s !important;\n}\n\n@keyframes wave {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(-100%);\n }\n}\n\n.premium-toggle:active .handle {\n transform: scale(0.9);\n}\n\n.premium-toggle input:focus ~ .switch .track {\n box-shadow:\n 0 0.05em 0.1em rgba(0, 0, 0, 0.1) inset,\n 0 -0.05em 0.1em rgba(255, 255, 255, 0.1) inset,\n 0 0.1em 0.2em rgba(0, 0, 0, 0.2),\n 0 0 0 0.2em rgba(59, 130, 246, 0.3);\n}\n\n.premium-toggle input:checked:focus ~ .switch .track {\n box-shadow:\n 0 0.05em 0.1em rgba(0, 0, 0, 0.2) inset,\n 0 -0.05em 0.1em rgba(255, 255, 255, 0.1) inset,\n 0 0.1em 0.5em rgba(63, 94, 251, 0.5),\n 0 0 0 0.2em rgba(59, 130, 246, 0.3);\n}\n"}

sharp-liger-65

👁 实时预览

📝 源代码