{"html":"

Daily Task List

\n\n

\n \n \n Complete project A report\n

\n\n

\n \n Reply to email from client B\n

\n\n

\n \n Schedule weekly team meeting\n

\n\n

\n \n Buy groceries for dinner\n

\n\n

\n \n Exercise for 30 minutes\n

\n","css":".checklist-container {\n font-family: sans-serif;\n max-width: 500px;\n margin: 40px auto;\n padding: 20px;\n background-color: #f4f7f6;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n}\n\n.checklist-title {\n text-align: center;\n color: #333;\n margin-bottom: 25px;\n font-size: 1.5em;\n font-weight: bold;\n}\n\n.checklist-item {\n display: flex;\n align-items: center;\n padding: 12px 0;\n border-bottom: 1px solid #e0e0e0;\n position: relative;\n}\n\n.checklist-item:last-child {\n border-bottom: none;\n}\n\n.checklist-checkbox {\n margin-right: 12px;\n cursor: pointer;\n flex-shrink: 0;\n transform: scale(1.2);\n accent-color: #2ecc71;\n}\n\n.checklist-label {\n color: #444;\n cursor: pointer;\n position: relative;\n transition: color 0.4s ease-in-out;\n display: inline-block;\n width: fit-content;\n}\n\n.checklist-label::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #e74c3c;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s ease-out;\n}\n\n.checklist-checkbox:checked + .checklist-label {\n color: #aaa;\n}\n\n.checklist-checkbox:checked + .checklist-label::after {\n transform: scaleX(1);\n}\n"}

cold-moose-88

👁 实时预览

📝 源代码