{"html":"\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: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n user-select: none;\n}\n\n.container input:checked ~ .like {\n animation: kfs-fill-like .5s forwards;\n}\n\n.container .like {\n fill: none;\n stroke: white;\n}\n\n.container input:checked ~ .celebrate {\n display: block;\n}\n\n.container .celebrate {\n position: absolute;\n animation: kfs-celebrate 1s;\n animation-fill-mode: forwards;\n display: none;\n stroke: white;\n}\n\n@keyframes kfs-celebrate {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n transform: scale(1.5) rotate(180deg);\n opacity: 0;\n display: none;\n }\n}\n\n@keyframes kfs-fill-like {\n\n 50% {\n fill: white;\n stroke: white;\n transform: scale(1.2);\n }\n\n 100% {\n fill: white;\n stroke: white;\n }\n}"}

terrible-lion-20

👁 实时预览

📝 源代码