{"html":"\n \n

\n \n \n

\n\nCheckBox\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.label {\n color: #888;\n font-size: 1.3rem;\n margin-left: 10px;\n cursor: pointer;\n}\n\n.container {\n display: flex;\n position: relative;\n cursor: pointer;\n user-select: none;\n justify-content: center;\n align-items: center;\n gap: 10px;\n color: #888;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 25px;\n width: 25px;\n background-color: #555;\n border-radius: 50px;\n transition-duration: 0.5s;\n overflow: hidden;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #49be5c;\n box-shadow: 0 0px 10px #49be5cdc;\n}\n\n.container .off {\n position: absolute;\n width: 25px;\n height: 25px;\n transition-duration: 0.5s;\n}\n\n.container .on {\n position: absolute;\n width: 25px;\n height: 25px;\n transform: translateY(25px);\n transition-duration: 0.5s;\n}\n\n.container .on::before {\n content: \"\";\n height: 16px;\n width: 16px;\n border-radius: 50px;\n background-color: transparent;\n border: #fff solid 2px;\n transition-duration: 0.2s;\n position: absolute;\n transform: translate(2.5px, 2.5px);\n}\n\n.container .off::before {\n content: \"\";\n height: 15px;\n width: 3px;\n background-color: #fff;\n transition-duration: 0.2s;\n position: absolute;\n transform: translate(-1.5px, -7.5px);\n left: 50%;\n top: 50%;\n}\n\n.container input:checked ~ .checkmark .on {\n transform: translateX(0%);\n}\n\n.container input:checked ~ .checkmark .off {\n transform: translateY(-100%);\n}\n"}

light-pig-3

👁 实时预览

📝 源代码