{"html":"

\n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n \n \n

\n","css":".toggle-switch {\n --toggle-width: 6.2em;\n --toggle-height: 3em;\n --toggle-bg: #f1f1f1;\n --toggle-core: #000000;\n --toggle-glow: rgba(249, 115, 22, 0.65);\n --toggle-sun: #f97316;\n --toggle-shadow: rgba(0, 0, 0, 0.5);\n --toggle-chrome: #e5e7eb;\n --toggle-reflect: rgba(255, 255, 255, 0.35);\n font-size: 16px;\n position: relative;\n display: inline-block;\n width: var(--toggle-width);\n height: var(--toggle-height);\n cursor: pointer;\n user-select: none;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--toggle-bg);\n border-radius: 1.5em;\n transition:\n background 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),\n box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);\n padding: 0.25em;\n box-shadow:\n inset 0 5px 10px var(--toggle-shadow),\n 0 3px 6px var(--toggle-shadow);\n overflow: hidden;\n}\n\n.celestial-core {\n position: relative;\n width: calc(var(--toggle-height) - 0.5em);\n height: calc(var(--toggle-height) - 0.5em);\n background: var(--toggle-core);\n border-radius: 50%;\n transition:\n transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),\n box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),\n margin 0.1s ease-out;\n transform: translateX(0);\n box-shadow:\n 0 0 10px var(--toggle-shadow),\n inset 0 0 5px var(--toggle-shadow);\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.celestial-icon {\n width: 90%;\n height: 90%;\n transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.moon-surface,\n.moon-crater1,\n.moon-crater2,\n.moon-crater3,\n.moon-crater4,\n.moon-crater5 {\n transition:\n fill 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),\n opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.sun-core,\n.sun-flare1,\n.sun-flare2,\n.heat-wave {\n transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.track-glow {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at 85% 50%,\n var(--toggle-glow) 15%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n z-index: 1;\n}\n\n.metal-track {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid var(--toggle-chrome);\n border-radius: 1.5em;\n box-shadow:\n inset 0 0 6px var(--toggle-chrome),\n 0 0 4px var(--toggle-glow),\n 0 0 8px #9ca3af;\n opacity: 0.95;\n transition:\n opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),\n box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n z-index: 0;\n}\n\n.reflection-effect {\n position: absolute;\n width: 100%;\n height: 60%;\n top: 0;\n background: linear-gradient(\n to bottom,\n var(--toggle-reflect),\n transparent 80%\n );\n opacity: 0.6;\n transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n z-index: 1;\n}\n\n.shadow-effect {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at 20% 50%,\n rgba(21, 21, 21, 0.4) 0%,\n transparent 60%\n );\n opacity: 0.5;\n transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n z-index: 0;\n}\n\n.click-feedback {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.25) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.15s ease-out;\n z-index: 3;\n}\n\n.toggle-switch input:checked + .toggle-slider {\n background: var(--toggle-sun);\n box-shadow:\n inset 0 5px 10px var(--toggle-shadow),\n 0 0 15px var(--toggle-glow);\n}\n\n.toggle-switch input:checked + .toggle-slider .celestial-core {\n transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n box-shadow:\n 0 0 15px var(--toggle-sun),\n inset 0 0 5px var(--toggle-shadow);\n margin-top: -0.15em;\n}\n\n.toggle-switch input:checked + .toggle-slider .moon-surface {\n fill: url(#sunGradient);\n}\n\n.toggle-switch input:checked + .toggle-slider .moon-crater1,\n.toggle-switch input:checked + .toggle-slider .moon-crater2,\n.toggle-switch input:checked + .toggle-slider .moon-crater3,\n.toggle-switch input:checked + .toggle-slider .moon-crater4,\n.toggle-switch input:checked + .toggle-slider .moon-crater5 {\n fill: #dc2626;\n opacity: 0;\n}\n\n.toggle-switch input:checked + .toggle-slider .sun-core {\n opacity: 1;\n}\n\n.toggle-switch input:checked + .toggle-slider .sun-flare1,\n.toggle-switch input:checked + .toggle-slider .sun-flare2 {\n opacity: 0.95;\n}\n\n.toggle-switch input:checked + .toggle-slider .heat-wave {\n opacity: 0.8;\n}\n\n.toggle-switch input:checked + .toggle-slider .moon-surface,\n.toggle-switch input:checked + .toggle-slider .moon-crater1,\n.toggle-switch input:checked + .toggle-slider .moon-crater2,\n.toggle-switch input:checked + .toggle-slider .moon-crater3,\n.toggle-switch input:checked + .toggle-slider .moon-crater4,\n.toggle-switch input:checked + .toggle-slider .moon-crater5 {\n opacity: 0;\n}\n\n.toggle-switch input:checked + .toggle-slider .celestial-icon {\n color: #7c2d12;\n}\n\n.toggle-switch input:checked + .toggle-slider .track-glow {\n opacity: 0.9;\n}\n\n.toggle-switch input:checked + .toggle-slider .metal-track {\n opacity: 1;\n box-shadow:\n inset 0 0 6px var(--toggle-chrome),\n 0 0 6px var(--toggle-glow),\n 0 0 10px #9ca3af;\n}\n\n.toggle-switch input:checked + .toggle-slider .reflection-effect {\n opacity: 0.8;\n}\n\n.toggle-switch input:checked + .toggle-slider .shadow-effect {\n opacity: 0.7;\n}\n\n.toggle-switch input:focus + .toggle-slider {\n box-shadow:\n inset 0 5px 10px var(--toggle-shadow),\n 0 0 0 5px var(--toggle-glow);\n}\n\n.toggle-switch input:hover + .toggle-slider {\n background: #d1d5db;\n}\n\n.toggle-switch input:checked:hover + .toggle-slider {\n background: #dc2626;\n}\n\n.toggle-switch input:active + .toggle-slider .celestial-core {\n scale: 0.98;\n box-shadow: 0 0 18px var(--toggle-sun);\n}\n\n.toggle-switch input:active + .toggle-slider .click-feedback {\n opacity: 1;\n animation: click-pulse 0.2s ease-out;\n}\n\n.toggle-switch input:disabled + .toggle-slider {\n opacity: 0.3;\n cursor: not-allowed;\n filter: grayscale(100%);\n}\n\n@keyframes click-pulse {\n 0% {\n opacity: 0.3;\n transform: scale(1);\n }\n 50% {\n opacity: 0.9;\n transform: scale(1.15);\n }\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n}\n"}

tall-parrot-16

👁 实时预览

📝 源代码