{"html":"

\n \n \n

\n \n

\n","css":".checkbox {\n position: relative;\n}\n\n.checkbox input[type=\"checkbox\"] {\n display: none;\n visibility: hidden;\n}\n\n.checkbox .cbx {\n -webkit-perspective: 20;\n perspective: 20;\n display: inline-block;\n border: 2px solid #e8e8eb;\n background: #e8e8eb;\n border-radius: 4px;\n transform: translate3d(0, 0, 0);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.checkbox .cbx:hover {\n border-color: #0b76ef;\n}\n\n.checkbox .flip {\n display: block;\n transition: all 0.4s ease;\n transform-style: preserve-3d;\n position: relative;\n width: 20px;\n height: 20px;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .cbx {\n border-color: #0b76ef;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .cbx .flip {\n transform: rotateY(180deg);\n}\n\n.checkbox .front,\n.checkbox .back {\n backface-visibility: hidden;\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n border-radius: 2px;\n}\n\n.checkbox .front {\n background: #fff;\n z-index: 1;\n}\n\n.checkbox .back {\n transform: rotateY(180deg);\n background: #0b76ef;\n text-align: center;\n color: #fff;\n line-height: 20px;\n box-shadow: 0 0 0 1px #0b76ef;\n}\n\n.checkbox .back svg {\n margin-top: 3px;\n fill: none;\n}\n\n.checkbox .back svg path {\n stroke: #fff;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n"}

stale-bobcat-64

👁 实时预览

📝 源代码