{"html":"\n \n

\n \n \n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n}\n\n.checkmark span {\n width: 32px;\n height: 2px;\n background-color: white;\n position: absolute;\n transition: all 0.3s ease-in-out;\n -webkit-transition: all 0.3s ease-in-out;\n -moz-transition: all 0.3s ease-in-out;\n -ms-transition: all 0.3s ease-in-out;\n -o-transition: all 0.3s ease-in-out;\n}\n\n.checkmark span:nth-child(1) {\n top: 10%;\n}\n\n.checkmark span:nth-child(2) {\n top: 50%;\n}\n\n.checkmark span:nth-child(3) {\n top: 90%;\n}\n\n.container input:checked + .checkmark span:nth-child(1) {\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n -webkit-transform: translateY(-50%) rotate(45deg);\n -moz-transform: translateY(-50%) rotate(45deg);\n -ms-transform: translateY(-50%) rotate(45deg);\n -o-transform: translateY(-50%) rotate(45deg);\n}\n\n.container input:checked + .checkmark span:nth-child(2) {\n top: 50%;\n transform: translateY(-50%) rotate(-45deg);\n -webkit-transform: translateY(-50%) rotate(-45deg);\n -moz-transform: translateY(-50%) rotate(-45deg);\n -ms-transform: translateY(-50%) rotate(-45deg);\n -o-transform: translateY(-50%) rotate(-45deg);\n}\n\n.container input:checked + .checkmark span:nth-child(3) {\n transform: translateX(-50px);\n -webkit-transform: translateX(-50px);\n -moz-transform: translateX(-50px);\n -ms-transform: translateX(-50px);\n -o-transform: translateX(-50px);\n opacity: 0;\n}"}

pretty-ladybug-100

👁 实时预览

📝 源代码