{"html":"\n \n

\n \n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n border-radius: 50%;\n background-color: white;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n transition: .3s;\n transform: scale(0);\n border-radius: 50%;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #20c580;\n transform: scale(1);\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n.container input:checked ~ .celebrate {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.25em;\n width: 0.30em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}\n\n.container .celebrate {\n position: absolute;\n transform-origin: center;\n animation: kfr-celebrate .4s;\n animation-fill-mode: forwards;\n display: none;\n stroke: #20c580;\n}\n\n@keyframes kfr-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n transform: scale(1.2);\n opacity: 0;\n display: none;\n }\n}"}

hungry-squid-59

👁 实时预览

📝 源代码