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

Do you love me?

\n\n","css":".check-container {\n position: relative;\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n background: linear-gradient(90deg, #b3ffab 0%, #12fff7 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.check {\n position: absolute;\n appearance: none;\n}\n\n.check-toggle {\n position: absolute;\n left: 0;\n top: 50%;\n height: 1.5rem;\n width: 1.5rem;\n transform: translateX(-150%) translateY(-50%);\n border-radius: 0.25em;\n border: 2px solid #b3ffab;\n}\n\n.check-toggle + .check-svg {\n position: absolute;\n left: 0;\n top: 50%;\n height: 2rem;\n width: 2rem;\n transform: translateX(-120%) translateY(-50%);\n transition: stroke-dashoffset 0.5s ease-out;\n stroke-dasharray: 100;\n stroke-dashoffset: 100;\n}\n\n.check:checked + .check-toggle + .check-svg {\n stroke-dashoffset: 0;\n}\n\n.check-label {\n font-size: 1rem;\n user-select: none;\n font-weight: semi-bold;\n}\n"}

polite-moose-58

👁 实时预览

📝 源代码