{"html":"

\n \n \n

","css":".checkbox-wrapper-31:hover .check {\n stroke-dashoffset: 0;\n}\n\n.checkbox-wrapper-31 {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 40px;\n}\n\n.checkbox-wrapper-31 .background {\n fill: #ccc;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 .stroke {\n fill: none;\n stroke: #fff;\n stroke-miterlimit: 10;\n stroke-width: 2px;\n stroke-dashoffset: 100;\n stroke-dasharray: 100;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 .check {\n fill: none;\n stroke: #fff;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n stroke-dashoffset: 22;\n stroke-dasharray: 22;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 input[type=checkbox] {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n margin: 0;\n opacity: 0;\n -appearance: none;\n -webkit-appearance: none;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:hover {\n cursor: pointer;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {\n fill: #6cbe45;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {\n stroke-dashoffset: 0;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {\n stroke-dashoffset: 0;\n}\n"}

white-cheetah-13

👁 实时预览

📝 源代码