{"html":"

\n \n \n

\n \n

\n Complete this awesome task\n \n

\n","css":".checkbox-container {\n display: inline-block;\n margin: 50px auto;\n user-select: none;\n}\n\n.task-checkbox {\n display: none;\n}\n\n.checkbox-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n font-size: 16px;\n color: #374151;\n font-weight: 500;\n transition: all 0.2s ease;\n padding: 8px;\n border-radius: 8px;\n}\n\n.checkbox-label:hover {\n background: rgba(16, 185, 129, 0.05);\n color: #111827;\n}\n\n.checkbox-box {\n position: relative;\n width: 22px;\n height: 22px;\n border: 2px solid #d1d5db;\n border-radius: 6px;\n margin-right: 12px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n background: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: visible;\n}\n\n.checkbox-fill {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n transform: scale(0);\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n border-radius: 4px;\n opacity: 0;\n}\n\n.checkmark {\n position: relative;\n z-index: 2;\n opacity: 0;\n transform: scale(0.3) rotate(20deg);\n transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.check-icon {\n width: 14px;\n height: 14px;\n fill: white;\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));\n}\n\n.success-ripple {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: rgba(16, 185, 129, 0.4);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n}\n\n.checkbox-text {\n transition: all 0.3s ease;\n position: relative;\n}\n\n.checkbox-text::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n width: 0;\n height: 2px;\n background: #6b7280;\n transition: width 0.4s ease;\n transform: translateY(-50%);\n}\n\n.checkbox-label:hover .checkbox-box {\n border-color: #10b981;\n box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);\n}\n\n.task-checkbox:checked + .checkbox-label .checkbox-box {\n border-color: #10b981;\n background: #10b981;\n box-shadow:\n 0 4px 12px rgba(16, 185, 129, 0.3),\n 0 0 0 2px rgba(16, 185, 129, 0.2);\n}\n\n.task-checkbox:checked + .checkbox-label .checkbox-fill {\n transform: scale(1);\n opacity: 1;\n}\n\n.task-checkbox:checked + .checkbox-label .checkmark {\n opacity: 1;\n transform: scale(1) rotate(0deg);\n animation: checkPop 0.3s ease-out 0.2s;\n}\n\n.task-checkbox:checked + .checkbox-label .success-ripple {\n animation: rippleSuccess 0.6s ease-out;\n}\n\n.task-checkbox:checked + .checkbox-label .checkbox-text {\n color: #6b7280;\n}\n\n.task-checkbox:checked + .checkbox-label .checkbox-text::after {\n width: 100%;\n}\n\n.checkbox-label:active .checkbox-box {\n transform: scale(0.95);\n}\n\n@keyframes checkPop {\n 0% {\n transform: scale(1) rotate(0deg);\n }\n 50% {\n transform: scale(1.2) rotate(-5deg);\n }\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}\n\n@keyframes rippleSuccess {\n 0% {\n width: 0;\n height: 0;\n opacity: 0.6;\n }\n 70% {\n width: 50px;\n height: 50px;\n opacity: 0.3;\n }\n 100% {\n width: 60px;\n height: 60px;\n opacity: 0;\n }\n}\n"}

wise-elephant-53

👁 实时预览

📝 源代码