{"html":"

To-Do List!

\n\n \n \n

\n \n

\n Water the plants\n \n\n \n \n

\n \n

\n Sketch a new idea\n \n\n \n \n

\n \n

\n Buy more coffee\n \n\n \n \n

\n \n

\n Read a chapter\n \n

\n","css":".sketch-background {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n background-color: #f4f1ea;\n}\n\n.sketch-container {\n width: 300px;\n height: 300px;\n background-color: #ffffff;\n border: 2px solid #4a4a4a;\n border-radius: 8px 6px 10px 7px;\n box-shadow: 5px 5px 0px #d1ccc1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n font-family: \"Comic Sans MS\", \"Chalkduster\", \"cursive\";\n}\n\n.sketch-title {\n font-size: 24px;\n font-weight: bold;\n color: #333;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.sketch-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.sketch-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.custom-checkbox-sketch {\n width: 24px;\n height: 24px;\n border: 3px solid #4a4a4a;\n border-radius: 5px 4px 6px 3px;\n margin-right: 12px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n}\n\n.sketch-label:hover .custom-checkbox-sketch {\n transform: rotate(-5deg) scale(1.1);\n}\n\n.checkmark-svg-sketch {\n width: 20px;\n height: 20px;\n stroke: #2980b9;\n stroke-width: 4;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n stroke-dasharray: 30;\n stroke-dashoffset: 30;\n transition: stroke-dashoffset 0.4s ease-in-out;\n}\n\n.sketch-text {\n color: #333;\n font-size: 18px;\n position: relative;\n transition: color 0.4s ease;\n}\n\n.sketch-text::after {\n content: \"\";\n position: absolute;\n left: -5%;\n top: 50%;\n height: 100%;\n width: 110%;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q 20 5, 40 10 T 80 10 T 100 10' stroke='%23d35400' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: 100% 100%;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n opacity: 0;\n}\n\n.sketch-input:checked + .custom-checkbox-sketch .checkmark-svg-sketch {\n stroke-dashoffset: 0;\n}\n\n.sketch-input:checked ~ .sketch-text {\n color: #999;\n}\n\n.sketch-input:checked ~ .sketch-text::after {\n transform: scaleX(1);\n opacity: 1;\n}\n"}

yellow-falcon-20

👁 实时预览

📝 源代码