{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n OFF\n ON\n \n\n","css":".toggle-switch {\n display: inline-flex;\n align-items: center;\n gap: 16px;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.toggle-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-track {\n position: relative;\n width: 76px;\n height: 38px;\n background: linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 40%, #151515 100%);\n border: 2px solid #3a302a;\n border-radius: 6px;\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n overflow: hidden;\n box-sizing: border-box;\n box-shadow:\n inset 0 4px 12px rgba(0, 0, 0, 0.5),\n inset 0 -2px 6px rgba(255, 255, 255, 0.02),\n 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\n.toggle-track::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 90deg,\n transparent 0px,\n transparent 3px,\n rgba(0, 0, 0, 0.08) 3px,\n rgba(0, 0, 0, 0.08) 4px\n );\n pointer-events: none;\n opacity: 0.5;\n}\n\n.toggle-track::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.05),\n transparent\n );\n}\n\n.toggle-rust {\n position: absolute;\n inset: 0;\n background: radial-gradient(\n ellipse at 5% 90%,\n rgba(139, 69, 19, 0.2) 0%,\n transparent 35%\n ),\n radial-gradient(\n ellipse at 95% 10%,\n rgba(120, 60, 20, 0.15) 0%,\n transparent 30%\n ),\n radial-gradient(\n ellipse at 50% 100%,\n rgba(100, 50, 15, 0.1) 0%,\n transparent 40%\n );\n pointer-events: none;\n transition: all 0.6s ease;\n}\n\n.toggle-input:checked + .toggle-track {\n border-color: #b04528;\n background: linear-gradient(160deg, #281815 0%, #140a08 40%, #1c100c 100%);\n box-shadow:\n inset 0 4px 12px rgba(0, 0, 0, 0.5),\n inset 0 -2px 6px rgba(179, 74, 40, 0.08),\n 0 4px 24px rgba(179, 74, 40, 0.25),\n 0 0 50px rgba(179, 74, 40, 0.15);\n}\n\n.toggle-input:checked + .toggle-track .toggle-rust {\n background: radial-gradient(\n ellipse at 5% 90%,\n rgba(179, 74, 40, 0.2) 0%,\n transparent 35%\n ),\n radial-gradient(\n ellipse at 95% 10%,\n rgba(220, 90, 45, 0.3) 0%,\n transparent 45%\n ),\n radial-gradient(\n ellipse at 80% 50%,\n rgba(255, 120, 60, 0.15) 0%,\n transparent 55%\n );\n}\n\n.toggle-glow {\n position: absolute;\n inset: 0;\n background: radial-gradient(\n ellipse at 78% 50%,\n rgba(255, 100, 50, 0.3) 0%,\n transparent 55%\n );\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n}\n\n.toggle-input:checked + .toggle-track .toggle-glow {\n opacity: 1;\n animation: glowPulse 2.5s ease-in-out infinite;\n}\n\n@keyframes glowPulse {\n 0%,\n 100% {\n opacity: 0.7;\n filter: brightness(1);\n }\n\n 50% {\n opacity: 1;\n filter: brightness(1.2);\n }\n}\n\n.toggle-thumb {\n position: absolute;\n top: 4px;\n left: 4px;\n width: 26px;\n height: 26px;\n background: linear-gradient(145deg, #5a5048 0%, #3a3028 40%, #4a4038 100%);\n border: 1px solid #6a5a4a;\n border-radius: 4px;\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow:\n 0 4px 14px rgba(0, 0, 0, 0.5),\n 0 2px 4px rgba(0, 0, 0, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.08),\n inset 0 -1px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n z-index: 2;\n}\n\n.toggle-input:checked + .toggle-track .toggle-thumb {\n left: calc(100% - 30px);\n background: linear-gradient(145deg, #e05a30 0%, #b04020 40%, #d04a28 100%);\n border-color: #ff7040;\n box-shadow:\n 0 4px 24px rgba(224, 90, 48, 0.65),\n 0 0 35px rgba(224, 90, 48, 0.45),\n 0 0 70px rgba(224, 90, 48, 0.25),\n inset 0 1px 0 rgba(255, 255, 255, 0.25),\n inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n}\n\n.thumb-inner {\n width: 12px;\n height: 12px;\n background: linear-gradient(145deg, #6a5a4a 0%, #4a3a30 100%);\n border-radius: 50%;\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);\n position: relative;\n}\n\n.toggle-input:checked + .toggle-track .thumb-inner {\n background: linear-gradient(145deg, #ff9060 0%, #ff7040 100%);\n box-shadow:\n 0 0 14px rgba(255, 144, 96, 0.9),\n 0 0 28px rgba(255, 112, 64, 0.6),\n 0 0 42px rgba(255, 90, 50, 0.3),\n inset 0 1px 2px rgba(255, 255, 255, 0.4);\n animation: emberGlow 1.2s ease-in-out infinite;\n}\n\n@keyframes emberGlow {\n 0%,\n 100% {\n box-shadow:\n 0 0 14px rgba(255, 144, 96, 0.9),\n 0 0 28px rgba(255, 112, 64, 0.6);\n transform: scale(1);\n }\n\n 50% {\n box-shadow:\n 0 0 18px rgba(255, 144, 96, 1),\n 0 0 36px rgba(255, 112, 64, 0.8),\n 0 0 54px rgba(255, 90, 50, 0.4);\n transform: scale(1.08);\n }\n}\n\n.thumb-shine {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 45%;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.12) 0%,\n transparent 100%\n );\n border-radius: 4px 4px 0 0;\n pointer-events: none;\n transition: all 0.6s ease;\n}\n\n.toggle-input:checked + .toggle-track .thumb-shine {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.25) 0%,\n transparent 100%\n );\n}\n\n.toggle-icons {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 11px;\n pointer-events: none;\n z-index: 1;\n}\n\n.toggle-icons svg {\n width: 16px;\n height: 16px;\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.icon-off {\n color: #6a6050;\n opacity: 1;\n transform: rotate(0deg) scale(1);\n}\n\n.icon-on {\n color: #4a3828;\n opacity: 0.35;\n transform: rotate(-20deg) scale(0.9);\n}\n\n.toggle-input:checked + .toggle-track .icon-off {\n opacity: 0.15;\n color: #3a3028;\n transform: rotate(180deg) scale(0.8);\n}\n\n.toggle-input:checked + .toggle-track .icon-on {\n opacity: 1;\n color: #ff9060;\n transform: rotate(0deg) scale(1.1);\n filter: drop-shadow(0 0 8px rgba(255, 144, 96, 0.7));\n}\n\n.toggle-label {\n position: relative;\n font-family: \"Consolas\", \"Courier New\", monospace;\n font-size: 0.8rem;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n height: 24px;\n display: flex;\n align-items: center;\n min-width: 32px;\n}\n\n.label-off,\n.label-on {\n position: absolute;\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.label-off {\n color: #5a5040;\n opacity: 1;\n transform: translateY(0);\n}\n\n.label-on {\n color: #e05a30;\n opacity: 0;\n transform: translateY(10px);\n}\n\n.toggle-input:checked ~ .toggle-label .label-off {\n opacity: 0;\n transform: translateY(-10px);\n}\n\n.toggle-input:checked ~ .toggle-label .label-on {\n opacity: 1;\n transform: translateY(0);\n text-shadow:\n 0 0 12px rgba(224, 90, 48, 0.6),\n 0 0 24px rgba(224, 90, 48, 0.3);\n animation: labelGlow 2s ease-in-out infinite;\n}\n\n@keyframes labelGlow {\n 0%,\n 100% {\n text-shadow:\n 0 0 12px rgba(224, 90, 48, 0.6),\n 0 0 24px rgba(224, 90, 48, 0.3);\n }\n\n 50% {\n text-shadow:\n 0 0 16px rgba(224, 90, 48, 0.8),\n 0 0 32px rgba(224, 90, 48, 0.5);\n }\n}\n\n.toggle-switch:hover .toggle-track {\n border-color: #5a4838;\n transform: scale(1.03);\n}\n\n.toggle-switch:hover .toggle-input:checked + .toggle-track {\n border-color: #d45030;\n}\n\n.toggle-switch:hover .toggle-thumb {\n box-shadow:\n 0 6px 18px rgba(0, 0, 0, 0.6),\n 0 2px 4px rgba(0, 0, 0, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.12);\n}\n\n.toggle-switch:hover .toggle-input:checked + .toggle-track .toggle-thumb {\n box-shadow:\n 0 6px 28px rgba(224, 90, 48, 0.75),\n 0 0 50px rgba(224, 90, 48, 0.55),\n 0 0 90px rgba(224, 90, 48, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.toggle-switch:active .toggle-thumb {\n width: 32px;\n transition: all 0.12s ease;\n}\n\n.toggle-switch:active .toggle-input:checked + .toggle-track .toggle-thumb {\n left: calc(100% - 36px);\n width: 32px;\n}\n\n.toggle-input:focus-visible + .toggle-track {\n outline: 2px solid #ff7040;\n outline-offset: 4px;\n}\n\n.toggle-switch::before {\n content: \"\";\n position: absolute;\n top: -6px;\n left: -6px;\n right: -6px;\n bottom: -6px;\n background: radial-gradient(\n ellipse at center,\n rgba(224, 90, 48, 0.08) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n border-radius: 12px;\n}\n\n.toggle-switch:hover::before {\n opacity: 1;\n}\n\n.toggle-switch::after {\n content: \"\";\n position: absolute;\n bottom: -14px;\n left: 10px;\n width: 56px;\n height: 14px;\n background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 70%);\n filter: blur(5px);\n opacity: 0.7;\n transition: all 0.6s ease;\n pointer-events: none;\n}\n\n.toggle-switch:hover::after {\n opacity: 0.9;\n transform: scale(1.08);\n}\n"}

itchy-stingray-87

👁 实时预览

📝 源代码