{"html":"\n \n

\n \n

Liked!

\n","css":"/* Hide the default checkbox */\n.container input {\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/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 3em;\n width: 3em;\n background-color: #171717;\n border-radius: 10px;\n transition: .2s ease-in-out;\n z-index: 2;\n}\n\n.like {\n position: relative;\n font-size: 0.8em;\n top: -3.5em;\n text-align: center;\n z-index: -1;\n}\n\n.icon {\n margin: 0.2em;\n fill: white;\n transition: .4s ease-in-out;\n}\n\n.checkmark:hover {\n background-color: white;\n}\n\n.checkmark:hover .icon {\n fill: black;\n transform: rotate(-8deg);\n transform-origin: bottom left;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: limegreen;\n}\n\n.container input:checked ~ .like {\n color: white;\n animation: 0.6s up_3951;\n}\n\n.container input:checked ~ .checkmark .icon {\n fill: white;\n transform: none;\n animation: 0.5s jump_3951;\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@keyframes up_3951 {\n 100% {\n transform: translateY(-2em);\n }\n}\n\n@keyframes jump_3951 {\n 50% {\n transform-origin: center;\n transform: translateY(-0.5em) rotate(-8deg);\n }\n\n 100% {\n transform-origin: center;\n transform: translateY(0em);\n }\n}"}

moody-sloth-42

👁 实时预览

📝 源代码