{"html":"\n \n \n \n \n \n \n \n \n\n","css":".switch {\n position: relative;\n width: 5.5em;\n height: 5.5em;\n}\n\n.checkbox,\n.slider,\n.svg {\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.checkbox,\n.svg {\n width: 100%;\n height: 100%;\n}\n\n.checkbox {\n background-color: hsl(3, 90%, 40%);\n border-radius: 50%;\n box-shadow:\n 0 0 0 0.1em hsl(3, 90%, 25%) inset,\n 0 0 0 0.2em hsl(3, 90%, 65%) inset,\n -0.3em 0.5em 0 hsl(3, 90%, 50%) inset,\n 0 0.15em 0 hsla(0, 0%, 0%, 0.2);\n filter: brightness(1);\n transition:\n background-color 0.15s linear,\n box-shadow 0.15s linear,\n filter 0.15s linear,\n transform 0.15s linear;\n appearance: none;\n}\n\n.checkbox:active {\n box-shadow:\n 0 0 0 0.1em hsl(3, 90%, 25%) inset,\n 0 0 0 0.2em hsl(3, 90%, 65%) inset,\n -0.3em 0.5em 0 hsl(3, 90%, 50%) inset,\n 0 0.05em 0 hsla(0, 0%, 0%, 0.2);\n}\n\n.checkbox:active,\n.checkbox:active + .svg {\n transform: scale(0.9);\n}\n\n.checkbox:checked {\n background-color: hsl(123, 90%, 30%);\n box-shadow:\n 0 0 0 0.1em hsl(123, 90%, 15%) inset,\n 0 0 0 0.2em hsl(123, 90%, 55%) inset,\n -0.3em 0.5em 0 hsl(123, 90%, 40%) inset,\n 0 0.15em 0 hsla(0, 0%, 0%, 0.2);\n}\n\n.checkbox:checked:active {\n box-shadow:\n 0 0 0 0.1em hsl(123, 90%, 15%) inset,\n 0 0 0 0.2em hsl(123, 90%, 55%) inset,\n -0.3em 0.5em 0 hsl(123, 90%, 40%) inset,\n 0 0.05em 0 hsla(0, 0%, 0%, 0.2);\n}\n\n.checkbox:focus,\n.checkbox:hover {\n filter: brightness(1.2);\n}\n\n.checkbox:focus {\n outline: 0;\n}\n\n.slider {\n clip: rect(1px, 1px, 1px, 1px);\n overflow: hidden;\n width: 1px;\n height: 1px;\n}\n\n.svg {\n pointer-events: none;\n transition: transform 0.15s linear;\n}\n\n.svg-ring,\n.svg-line {\n stroke: hsl(223, 90%, 100%);\n}\n\n.svg-ring {\n stroke-dasharray: 0 5 27.7 5;\n transition:\n stroke 0.15s ease-in-out,\n stroke-dasharray 0.3s 0.25s ease-in-out;\n}\n\n.checkbox:checked + .svg .svg-ring {\n stroke-dasharray: 0 0 0 37.7;\n transition-delay: 0s;\n}\n\n.svg-line {\n stroke-dashoffset: 3;\n transition:\n stroke 0.15s linear,\n stroke-dashoffset 0.3s ease-in-out;\n}\n\n.svg-line:nth-of-type(1) {\n transition-delay: 0s, 0.25s;\n}\n\n.checkbox:checked + .svg .svg-line:nth-of-type(1) {\n stroke-dashoffset: -6;\n transition-delay: 0s;\n}\n\n.svg-line:nth-of-type(2) {\n stroke-dashoffset: 6;\n}\n\n.checkbox:checked + .svg .svg-line:nth-of-type(2) {\n stroke-dashoffset: -3;\n transition-delay: 0s, 0.25s;\n}\n"}

wet-tiger-29

👁 实时预览

📝 源代码