{"html":"\n \n \n \n Lorem Ipsum\n \n \n\n\n\n","css":".notebook-checkbox .text {\n filter: url(#handDrawnNoise);\n}\n\n.notebook-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n font-family: \"Courier New\", monospace;\n font-size: 1.5rem;\n font-weight: bold;\n padding-left: 2em;\n}\n\n.notebook-checkbox input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n filter: url(#handDrawnNoise);\n}\n\n.notebook-checkbox .checkmark {\n position: absolute;\n left: 0;\n top: 0.1em;\n height: 1em;\n width: 1em;\n border-radius: 10px;\n border: 3px solid #33333366;\n filter: url(#handDrawnNoise);\n background: radial-gradient(#333333f1 65%, #33333300 70%);\n animation: unmark 0.2s forwards;\n animation-delay: 0.5s;\n}\n\n.notebook-checkbox input:checked ~ .checkmark {\n filter: url(#handDrawnNoise);\n animation: mark 0.3s forwards;\n}\n\n@keyframes mark {\n 0% {\n background: radial-gradient(#3333333d 0%, #33333300 35%);\n }\n 50% {\n background: radial-gradient(#3333333d 0%, #33333300 35%);\n }\n 75% {\n background: radial-gradient(#333333f1 35%, #33333300 60%);\n }\n 100% {\n background: radial-gradient(#333333f1 65%, #33333300 70%);\n }\n}\n\n@keyframes unmark {\n 0% {\n background: radial-gradient(#333333f1 65%, #33333300 70%);\n }\n 50% {\n background: linear-gradient(#333333f1 35%, #33333300 60%);\n }\n 100% {\n background: radial-gradient(#3333333d 0%, #33333300 35%);\n }\n}\n\n.notebook-checkbox .text {\n position: relative;\n z-index: 1;\n transition: color 0.3s ease;\n display: inline-block;\n filter: url(#handDrawnNoise);\n}\n\n.notebook-checkbox .text .cut-line {\n position: absolute;\n left: 0em;\n right: 0;\n bottom: 15%;\n height: 1em;\n width: calc(100% + 15px);\n pointer-events: none;\n stroke: #333;\n stroke-width: 2;\n fill: none;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s ease;\n}\n\n.notebook-checkbox input:checked ~ .text .cut-line {\n transform: scaleX(1);\n}\n\n.notebook-checkbox input:checked ~ .text {\n color: #222222aa;\n}\n"}

little-dingo-13

👁 实时预览

📝 源代码