{"html":"\n \n \n

\n \n \n \n

\n \n\n","css":".container {\n --checkbox-size: 30px;\n --checkbox-width: 3px;\n --checkbox-border-radius: 4px;\n --tickmark-width: 5;\n --checkmark-box-color: purple;\n --checkmark-color: white;\n}\n.checkbox {\n display: none;\n}\n.checkbox-container {\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n position: relative;\n}\n.checkbox-container .box {\n width: 100%;\n height: 100%;\n border: var(--checkbox-width) solid rgba(0, 0, 0, 0.5);\n border-radius: var(--checkbox-border-radius);\n transition: all 1s ease;\n}\n.checkbox-container:hover .box {\n border-color: var(--checkmark-box-color);\n border-width: calc(var(--checkbox-width) + 1px);\n}\n\n.checkbox-container .checkmark::before,\n.checkbox-container .checkmark::after {\n content: \"\";\n background: var(--checkmark-box-color);\n width: 0%;\n height: 0%;\n position: absolute;\n top: 50%;\n transition: all 0.5s ease;\n z-index: -1;\n}\n.checkbox-container .checkmark:hover::before,\n.checkbox:checked + .checkbox-label .checkmark::before {\n border-radius: var(--checkbox-border-radius);\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n\n.checkbox-container .checkmark:hover::after,\n.checkbox:checked + .checkbox-label .checkmark::after {\n border-radius: var(--checkbox-border-radius);\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n.checkbox-container .checkmark::after {\n right: 0;\n}\n\n.checkbox-container .checkmark {\n z-index: 2;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.checkbox:checked + .checkbox-label .checkmark::before,\n.checkbox:checked + .checkbox-label .checkmark::after {\n width: 50%;\n height: 100%;\n top: 0;\n}\n\n.tick-container {\n position: absolute;\n top: 50%;\n width: 100%;\n height: 100%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.checkbox:checked + .checkbox-label .tickmark {\n position: absolute;\n top: 0px;\n width: 100%;\n stroke: var(--checkmark-color);\n stroke-width: var(--tickmark-width);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.checkbox:checked + .checkbox-label .tickmark-check {\n stroke-dasharray: 36; /* Total length of the tick path */\n stroke-dashoffset: 36; /* Initially hidden */\n animation: draw-check 0.6s ease-out forwards 0.6s;\n}\n\n@keyframes draw-check {\n to {\n stroke-dashoffset: 0;\n }\n}\n"}

stale-warthog-21

👁 实时预览

📝 源代码