{"html":"\n\t\n\t

\n\t

\n\t\t

\n\t

OFF

\n","css":".switch {\n position: relative;\n display: inline-block;\n width: 80px;\n height: 80px;\n border: 2px solid #dcdcdc;\n background: #e0e0e0;\n box-shadow: 7px 7px 23px #bebebe, -7px -7px 23px #ffffff;\n overflow: hidden;\n border-radius: 60px;\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 -webkit-transition: 0.5s;\n transition: 0.5s;\n}\n\n.chbox:checked + .slider:before {\n background: white;\n box-shadow: none;\n}\n\n.chbox:focus + .slider {\n box-shadow: 0 0 1px #2196f3;\n}\n\n.slider {\n color: #9a9a9a;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-family: sans-serif;\n}\n\n.slider--0 {\n color: white;\n font-weight: 600;\n background-color: #49d84e;\n}\n\n.slider--1 div {\n transition: 0.5s;\n}\n\n.slider--1 div {\n position: absolute;\n width: 100%;\n height: 50%;\n left: 0;\n}\n\n.chbox:checked ~ .slider--1 div:first-child {\n transform: translateY(-100%);\n transition-delay: 1s;\n}\n\n.chbox:checked ~ .slider--1 div:last-child {\n transform: translateY(100%);\n transition-delay: 1s;\n}\n\n.chbox:checked ~ .slider--2 {\n transform: translateX(100%);\n transition-delay: 0.5s;\n}\n\n.chbox:checked ~ .slider--3 {\n transform: translateX(-100%);\n transition-delay: 0s;\n}\n\n.slider--1 div:first-child {\n transform: translateY(0);\n top: 0;\n background-color: #f3f3f3;\n transition-delay: 0s;\n}\n\n.slider--1 div:last-child {\n transform: translateY(0);\n bottom: 0;\n background-color: #f3f3f3;\n border-top: 1px solid #e0e0e0;\n transition-delay: 0s;\n}\n\n.slider--2 {\n background-color: #e6e6e6;\n transition-delay: 0.5s;\n transform: translateX(0);\n border-left: 1px solid #d2d2d2;\n}\n\n.slider--3 {\n background-color: #d2d2d2;\n transition-delay: 1s;\n transform: translatex(0);\n border-right: 1px solid #d2d2d2;\n}\n"}

rude-dolphin-85

👁 实时预览

📝 源代码