{"html":"\n \n \n \n \n \n \n \n","css":"/* checkbox settings 👇 */\n\n.switch {\n /* global */\n --total_transition_duration: .3s;\n /* switch */\n --slider_width: 2.875em;\n --slider_height: 1.5em;\n --slider_light_bg: linear-gradient(90deg, #f32a85 0%, #f19d36 100%);\n --slider_night_bg: linear-gradient(90deg, #1701a1 0%, #af0693 75%);\n --slider_offset: calc((var(--slider_height) - var(--circle_diameter)) / 2);\n --slider_radius: calc(var(--slider_height) / 2);\n /* circle */\n --circle_diameter: 1.125em;\n --circle_rotation: 360deg;\n /* svg */\n --svg_width: var(--circle_diameter);\n --sun-color: #fff;\n --moon-color: #fff;\n}\n\n.switch input {\n display: none;\n}\n\n.slider svg {\n position: absolute;\n height: auto;\n color: var(--svg-color);\n transition: var(--total_transition_duration) ease;\n width: 100%;\n}\n\n.circle svg.sun {\n transform: scale(1);\n color: var(--sun-color);\n}\n\n.circle svg.moon {\n transform: scale(0);\n color: var(--moon-color);\n width: calc(100% - 2px);\n}\n\n.slider {\n display: inline-block;\n width: var(--slider_width);\n height: var(--slider_height);\n border-radius: var(--slider_radius);\n position: relative;\n cursor: pointer;\n transition: var(--total_transition_duration) ease;\n overflow: hidden;\n}\n\n.slider::before,\n.slider::after {\n content: \"\";\n position: absolute;\n inset: 0;\n transition: var(--total_transition_duration) ease;\n}\n\n/* ::before and ::after backgrounds are needed for smooth \ntransition of gradients otherwise there is no way :\\ */\n.slider::before {\n opacity: 0;\n background: var(--slider_night_bg);\n}\n\n.slider::after {\n opacity: 1;\n background: var(--slider_light_bg);\n}\n\n/* ------------ */\n\n.circle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--circle_diameter);\n height: var(--circle_diameter);\n position: absolute;\n top: var(--slider_offset);\n left: var(--slider_offset);\n transition: var(--total_transition_duration) ease;\n z-index: 10;\n}\n\n/* actions */\n\n.switch input:checked+.slider::before {\n opacity: 1;\n}\n\n.switch input:checked+.slider::after {\n opacity: 0;\n}\n\n.switch input:active+.slider .circle {\n transform: scale(0.9);\n}\n\n.switch input:checked+.slider .circle {\n left: calc(100% - var(--circle_diameter) - var(--slider_offset));\n}\n\n.switch input:checked+.slider .sun {\n transform: scale(0) rotate(var(--circle_rotation));\n}\n\n.switch input:checked+.slider .moon {\n transform: scale(1) rotate(var(--circle_rotation));\n}"}

tame-moth-5

👁 实时预览

📝 源代码