{"html":"

\n \n \n

\n \n \n \n

\n \n One\n\n \n \n

\n \n \n \n

\n \n Two\n\n \n \n

\n \n \n \n

\n \n Three\n\n \n \n

\n \n \n \n

\n \n Four\n

\n","css":".checkbox-label {\n font-size: 22px;\n color: #fefefe;\n padding: 10px 50px 10px 5px;\n font-family: Arial, Helvetica, sans-serif;\n user-select: none;\n display: flex;\n position: relative;\n align-items: center;\n transition: all 0.3s;\n}\n\n.checkbox {\n width: 35px;\n height: 35px;\n cursor: pointer;\n margin-right: -22px;\n appearance: none;\n border-radius: 5px;\n background-color: #64ccc5;\n z-index: 2;\n transition: all 0.3s;\n}\n\n.container {\n width: 35px;\n height: 35px;\n position: relative;\n top: 4px;\n left: -8%;\n border-radius: 5px;\n background-color: #dafffb;\n transition: all 0.3s;\n}\n\n.checkbox::before {\n content: \"\";\n background-color: #ffc8c8;\n position: relative;\n display: flex;\n top: 45%;\n left: 50%;\n width: 55px;\n height: 3px;\n border-radius: 25px;\n transform: translate(100px, 0px) scale(0);\n transition: ease-out 0.15s;\n}\n\n.checkbox:checked::before {\n transform: translateX(2em);\n top: 12px;\n transition: ease-out 0.15s;\n}\n\n.checkbox:hover {\n transform: translate(4px, 4px);\n transition: ease-out 0.15s;\n background-color: #ffc8c8;\n}\n\n.checkbox:checked {\n transform: translate(4px, 4px);\n transition: ease-out 0.15s;\n background-color: #ffc8c8;\n}\n\n.svg-icon {\n position: absolute;\n width: 25px;\n height: 25px;\n display: flex;\n z-index: 3;\n top: 35%;\n left: 11%;\n color: #fefefe;\n font-family: \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n transform: rotate(0deg) scale(0);\n transition: ease-in 0.2s;\n}\n\n.checkbox:checked ~ .svg-icon {\n transform: rotate(360deg) scale(1);\n transition: ease-in 0.2s;\n}\n"}

smooth-quail-14

👁 实时预览

📝 源代码