{"html":"\n \n \n \n \n \n","css":".switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 70px;\n height: 34.5px;\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: .4s;\n border-radius: 30px;\n}\n\n.commutator {\n cursor: pointer;\n position: absolute;\n top: -29%;\n left: -14%;\n transition: .4s;\n}\n\n.iron-man {\n position: absolute;\n top: -27%;\n left: -100%;\n transform: rotate(90deg);\n}\n\n.input:checked + .slider {\n background-color: #2196F3;\n}\n\n.input:checked + .slider .commutator {\n transform: translateX(34.5px);\n opacity: 0;\n}\n\n.input:checked + .slider .iron-man {\n animation: show_5911 1.3s ease-in-out forwards;\n}\n\n@keyframes show_5911 {\n 0% {\n transform: translateX(0px) rotate(90deg);\n }\n\n 50% {\n transform: translateX(75px) rotate(90deg);\n }\n\n 100% {\n transform: translateX(79px) rotate(0deg);\n }\n}"}

light-dragonfly-53

👁 实时预览

📝 源代码