{"html":"

\n \n \n

\n On\n Off\n

\n \n \n

\n","css":"label {\n transform: scale(1); /* Reduced size */\n display: block;\n width: 100px; /* Smaller width */\n height: 50px; /* Smaller height */\n border-radius: 25px;\n background: linear-gradient(to bottom, #9e9e9e 30%, #f4f4f4);\n box-shadow:\n 0 1px 0 0 #fff,\n 0 -1px 0 0 #969494;\n position: relative;\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n}\n\nlabel input {\n display: none;\n}\n\nlabel div {\n display: block;\n width: 80px; /* Reduced width */\n height: 30px; /* Reduced height */\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background: linear-gradient(to bottom, #8b8c8e 20%, #f4f4f4);\n border-radius: 15px;\n transition: 0.2s;\n}\n\nlabel div:after {\n content: \"\";\n position: absolute;\n display: block;\n height: 28px; /* Reduced height */\n width: 78px; /* Reduced width */\n left: 1px;\n top: 1px;\n border-radius: 14px;\n background: #828080;\n box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);\n transition: 0.2s;\n}\n\nlabel i {\n display: block;\n width: 40px; /* Reduced size */\n height: 40px; /* Reduced size */\n position: absolute;\n background: linear-gradient(to top, #9e9e9e 20%, #f4f4f4);\n border-radius: 50%;\n box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.7);\n top: 5px;\n left: 5px;\n transition: 0.25s;\n}\n\nlabel i:after {\n content: \"\";\n position: absolute;\n display: block;\n width: 34px; /* Reduced size */\n height: 34px; /* Reduced size */\n left: 3px;\n top: 3px;\n border-radius: 50%;\n background: #d5d4d4;\n z-index: 1;\n}\n\nlabel input:checked ~ i {\n top: 5px;\n left: 54px; /* Adjusted to fit new size */\n}\n\nlabel input:checked + div:after {\n background: #0f0; /* Green glow */\n box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.6);\n}\n\nlabel input:checked + div > .off {\n color: transparent;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0);\n}\n\nlabel input:checked + div > .on {\n color: hsl(24, 2%, 49%);\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\nlabel input:not(:checked) + div:after {\n background: #f00; /* Red glow */\n box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.6);\n}\n\nlabel input:not(:checked) + div > .on {\n color: transparent;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0);\n}\n\nlabel input:not(:checked) + div > .off {\n color: #444;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n\nlabel:after {\n content: \"\";\n position: absolute;\n display: block;\n width: 102px; /* Adjusted to fit new size */\n height: 52px; /* Adjusted to fit new size */\n border-radius: 26px;\n top: -1px;\n left: -1px;\n z-index: -1;\n background: linear-gradient(to bottom, #969494, #fff);\n}\n\nlabel:hover {\n cursor: pointer;\n}\n\nlabel:focus,\nlabel:active {\n outline: 0;\n}\n\n.on,\n.off {\n text-transform: uppercase;\n position: absolute;\n left: 12px; /* Adjusted for smaller size */\n top: 50%;\n transform: translateY(-50%);\n font-size: 0.8em; /* Smaller font size */\n font-weight: 600;\n z-index: 2;\n letter-spacing: 1px;\n transition: 0.25s;\n}\n\n.on {\n color: transparent;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0);\n}\n\n.off {\n left: initial;\n right: 12px; /* Adjusted for smaller size */\n color: hsl(24, 2%, 49%);\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n\n@keyframes switchOn {\n 0% {\n background-color: #f00;\n box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);\n }\n 100% {\n background-color: #0f0;\n box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);\n }\n}\n\n@keyframes switchOff {\n 0% {\n background-color: #0f0;\n box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);\n }\n 100% {\n background-color: #f00;\n box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);\n }\n}\n\nlabel input:checked + div:after {\n animation: switchOn 0.5s ease-in-out forwards;\n}\n\nlabel input:not(:checked) + div:after {\n animation: switchOff 0.5s ease-in-out forwards;\n}\n"}

tame-panda-35

👁 实时预览

📝 源代码