{"html":"

\n \n \n \n \n \n \n \n \n

\n Like\n \n

\n","css":".like-wrapper {\n --gap: 0.5em;\n --radius: 0.35em;\n display: flex;\n align-items: center;\n text-align: center;\n justify-content: center;\n --dot-bg: #212121;\n --dot-color: #313131;\n --dot-size: 1px;\n --dot-space: 22px;\n background: linear-gradient(\n 90deg,\n var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),\n transparent 1%\n )\n center / var(--dot-space) var(--dot-space),\n linear-gradient(\n var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),\n transparent 1%\n )\n center / var(--dot-space) var(--dot-space),\n var(--dot-color);\n border: 0.1em solid #313131;\n padding: 0.5em;\n border-radius: var(--radius);\n box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1);\n cursor: pointer;\n}\n\n.check[type=\"checkbox\"] {\n display: none;\n}\n\n.container {\n display: flex;\n align-items: center;\n cursor: pointer;\n margin-top: -0.25em;\n margin-bottom: -0.25em;\n}\n\n.icon {\n width: 1.5em;\n height: 1.5em;\n margin-left: 0.5em;\n fill: white;\n transition: opacity 0.3s ease-in-out;\n}\n\n.icon.active {\n display: none;\n fill: #f52121;\n}\n\n.check[type=\"checkbox\"]:checked + .container .icon.active {\n display: inline-block;\n animation: wiggle 0.5s ease-in-out;\n}\n\n.check[type=\"checkbox\"]:checked + .container .icon.inactive {\n display: none;\n}\n\n.like-text {\n margin-left: 0.5em;\n padding: 0.5em;\n color: white;\n font-family: Arial, sans-serif;\n font-weight: bolder;\n}\n\n@keyframes wiggle {\n 0%,\n 100% {\n transform: rotate(0deg);\n }\n 25% {\n transform: rotate(-10deg);\n }\n 50% {\n transform: rotate(10deg);\n }\n 75% {\n transform: rotate(-10deg);\n }\n}\n"}

hot-rattlesnake-30

👁 实时预览

📝 源代码