{"html":"\n \n \n \n \n \n \n Off\n On\n \n \n \n\n","css":".switch__input {\n color: hsl(223, 10%, 90%);\n font-size: 15px;\n}\n.switch,\n.switch__input,\n.switch__handle-sides,\n.switch__handle-side,\n.switch__handle-labels,\n.switch__handle-label,\n.switch__handle-texture {\n display: block;\n}\n.switch,\n.switch__input {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.switch {\n margin: auto;\n position: relative;\n width: 5em;\n height: 5em;\n}\n.switch__input {\n border-radius: 0.25em;\n outline: transparent;\n position: relative;\n width: 100%;\n height: 100%;\n transition:\n background-color 0.4s,\n box-shadow 0.4s;\n -webkit-appearance: none;\n appearance: none;\n}\n.switch__input:before {\n border-radius: inherit;\n box-shadow: 0 0 0 max(0.125em, 1px) hsla(223, 90%, 50%, 0);\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n transition: box-shadow 0.15s linear;\n}\n.switch__input:focus-visible:before {\n box-shadow: 0 0 0 max(0.125em, 1px) hsla(223, 90%, 50%, 1);\n}\n.switch__handle,\n.switch__handle-sides,\n.switch__handle-side,\n.switch__handle-labels,\n.switch__handle-label {\n position: absolute;\n}\n.switch__handle,\n.switch__handle-label {\n transition: transform 0.4s cubic-bezier(0.65, 0, 0.36, 1.6);\n}\n.switch__handle,\n.switch__handle-sides,\n.switch__handle-texture {\n border-radius: 0.125em;\n}\n.switch__handle {\n box-shadow: 0.25em 0.25em 0.25em hsla(223, 10%, 10%, 0.4);\n top: 31%;\n left: 30%;\n width: 40%;\n height: 80%;\n rotate: 270deg;\n}\n.switch__handle-sides,\n.switch__handle-labels,\n.switch__handle-texture {\n width: 100%;\n height: 100%;\n}\n.switch__handle-sides,\n.switch__handle-side {\n background-color: hsl(223, 10%, 85%);\n transition:\n background-color 0.4s,\n transform 0.4s cubic-bezier(0.65, 0, 0.36, 1.6);\n}\n.switch__handle-sides {\n --side-on: hsl(123, 90%, 40%);\n background-image: linear-gradient(90deg, transparent 50%, var(--side-on) 50%);\n overflow: hidden;\n}\n.switch__handle-side {\n background-image: linear-gradient(90deg, var(--side-on) 50%, transparent 50%);\n transform: translateX(-50%);\n width: 200%;\n height: 100%;\n}\n.switch__handle-labels {\n transform-style: preserve-3d;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.switch__handle-label {\n backface-visibility: hidden;\n font-size: 15px;\n text-shadow: 0 0 0.125em hsla(223, 10%, 10%, 0.3);\n line-height: 1;\n top: 50%;\n left: 50%;\n text-align: center;\n text-transform: uppercase;\n transform: translate(-50%, -50%) rotateZ(90deg) rotateX(0) translateZ(0.55rem);\n}\n.switch__handle-label + .switch__handle-label {\n color: hsl(0, 0%, 100%);\n text-shadow: 0 0 0.125em hsla(0, 0%, 100%, 0.3);\n transform: translate(-50%, -50%) rotateZ(90deg) rotateX(180deg)\n translateZ(0.55rem);\n}\n.switch__handle-texture {\n background-image: linear-gradient(\n 90deg,\n hsla(0, 0%, 100%, 0),\n hsla(0, 0%, 100%, 0.3) 20%,\n hsla(0, 0%, 100%, 0) 40%,\n hsla(0, 0%, 0%, 0) 50%,\n hsla(0, 0%, 0%, 0.4)\n );\n\n transform: translateZ(0);\n}\n.switch__input:checked ~ .switch__handle {\n transform: translateX(100%);\n}\n.switch__input:checked ~ .switch__handle .switch__handle-side {\n transform: translateX(0);\n}\n.switch__input:checked ~ .switch__handle .switch__handle-label {\n transform: translate(-50%, -50%) rotateZ(90deg) rotateX(180deg)\n translateZ(0.55rem);\n}\n.switch__input:checked\n ~ .switch__handle\n .switch__handle-label\n + .switch__handle-label {\n transform: translate(-50%, -50%) rotateZ(90deg) rotateX(360deg)\n translateZ(0.55rem);\n}\n.switch__label {\n overflow: hidden;\n position: absolute;\n width: 1px;\n height: 1px;\n}\n\n/* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(223, 10%, 30%);\n --fg: hsl(223, 10%, 90%);\n }\n .switch__handle-sides,\n .switch__handle-side {\n background-color: hsl(0, 100%, 70%);\n }\n .switch__handle-label {\n text-shadow: 0 0 0.125em hsla(223, 10%, 90%, 0.3);\n }\n .switch__input {\n background-color: hsl(223, 10%, 35%);\n box-shadow:\n 0.125em 0.125em 0.125em hsl(240, 1%, 30%) inset,\n -0.125em -0.125em 0.125em hsl(220, 2%, 39%) inset,\n 0.125em 0.125em 0.375em hsl(0, 0%, 82%);\n }\n}\n"}

tidy-baboon-0

👁 实时预览

📝 源代码