{"html":"

\n \n \n \n \n \n

","css":".toggler {\n width: 72px;\n margin: 40px auto;\n}\n\n.toggler input {\n display: none;\n}\n\n.toggler label {\n display: block;\n position: relative;\n width: 72px;\n height: 36px;\n border: 1px solid #d6d6d6;\n border-radius: 36px;\n background: #e4e8e8;\n cursor: pointer;\n}\n\n.toggler label::after {\n display: block;\n border-radius: 100%;\n background-color: #d7062a;\n content: '';\n animation-name: toggler-size;\n animation-duration: 0.15s;\n animation-timing-function: ease-out;\n animation-direction: forwards;\n animation-iteration-count: 1;\n animation-play-state: running;\n}\n\n.toggler label::after, .toggler label .toggler-on, .toggler label .toggler-off {\n position: absolute;\n top: 50%;\n left: 25%;\n width: 26px;\n height: 26px;\n transform: translateY(-50%) translateX(-50%);\n transition: left 0.15s ease-in-out, background-color 0.2s ease-out, width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s ease-in-out;\n}\n\n.toggler input:checked + label::after, .toggler input:checked + label .toggler-on, .toggler input:checked + label .toggler-off {\n left: 75%;\n}\n\n.toggler input:checked + label::after {\n background-color: #50ac5d;\n animation-name: toggler-size2;\n}\n\n.toggler .toggler-on, .toggler .toggler-off {\n opacity: 1;\n z-index: 2;\n}\n\n.toggler input:checked + label .toggler-off, .toggler input:not(:checked) + label .toggler-on {\n width: 0;\n height: 0;\n opacity: 0;\n}\n\n.toggler .path {\n fill: none;\n stroke: #fefefe;\n stroke-width: 7px;\n stroke-linecap: round;\n stroke-miterlimit: 10;\n}\n\n@keyframes toggler-size {\n 0%, 100% {\n width: 26px;\n height: 26px;\n }\n\n 50% {\n width: 20px;\n height: 20px;\n }\n}\n\n@keyframes toggler-size2 {\n 0%, 100% {\n width: 26px;\n height: 26px;\n }\n\n 50% {\n width: 20px;\n height: 20px;\n }\n}\n "}

spicy-moose-47

👁 实时预览

📝 源代码