{"html":"\n \n \n \n \n \n \n \n \n\n","css":".switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 4em;\n height: 2em;\n border-radius: 30px;\n overflow: hidden;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: 0.4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 0;\n background-color: #d0b0ff;\n transition: 0.4s 0.4s;\n}\n\n.slider:after {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #242824;\n transition: 0.4s 0.4s;\n z-index: 10;\n}\n\n.switch input:checked + .slider::before {\n width: 100%;\n}\n\n.switch input:checked + .slider:after {\n transform: translateX(2em);\n background-color: #9147ff;\n}\n\n.switch .hand {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 62px;\n height: 62px;\n transition: 0.4s ease;\n}\n\n.switch .hand.left {\n left: -62px;\n}\n\n.switch .hand.right {\n right: -62px;\n}\n\n.switch .hand.left,\n.switch .hand.right {\n animation: none;\n}\n\n.switch:focus-within input:checked ~ .hand.right {\n animation: hand-right 0.7s linear;\n}\n\n.switch:focus-within input:not(:checked) ~ .hand.left {\n animation: hand-left 0.7s linear;\n}\n\n@keyframes hand-left {\n 0% {\n left: -62px;\n }\n 50% {\n left: 0px;\n }\n 100% {\n left: -62px;\n }\n}\n\n@keyframes hand-right {\n 0% {\n right: -62px;\n }\n 50% {\n right: 0px;\n }\n 100% {\n right: -62px;\n }\n}\n"}

fast-owl-8

👁 实时预览

📝 源代码