{"html":"

\n \n \n

\n \n

\n \n\n \n \n

\n \n

\n \n\n \n \n

\n \n

\n \n\n \n \n

\n \n

\n","css":".checkbox-container {\n display: flex;\n gap: 20px;\n padding: 20px;\n background: #f8fafc;\n border-radius: 16px;\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.ios-checkbox {\n --checkbox-size: 28px;\n --checkbox-color: #3b82f6;\n --checkbox-bg: #dbeafe;\n --checkbox-border: #93c5fd;\n\n position: relative;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.ios-checkbox input {\n display: none;\n}\n\n.checkbox-wrapper {\n position: relative;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n border-radius: 8px;\n transition: transform 0.2s ease;\n}\n\n.checkbox-bg {\n position: absolute;\n inset: 0;\n border-radius: 8px;\n border: 2px solid var(--checkbox-border);\n background: white;\n transition: all 0.2s ease;\n}\n\n.checkbox-icon {\n position: absolute;\n inset: 0;\n margin: auto;\n width: 80%;\n height: 80%;\n color: white;\n transform: scale(0);\n transition: all 0.2s ease;\n}\n\n.check-path {\n stroke-dasharray: 40;\n stroke-dashoffset: 40;\n transition: stroke-dashoffset 0.3s ease 0.1s;\n}\n\n/* Checked State */\n.ios-checkbox input:checked + .checkbox-wrapper .checkbox-bg {\n background: var(--checkbox-color);\n border-color: var(--checkbox-color);\n}\n\n.ios-checkbox input:checked + .checkbox-wrapper .checkbox-icon {\n transform: scale(1);\n}\n\n.ios-checkbox input:checked + .checkbox-wrapper .check-path {\n stroke-dashoffset: 0;\n}\n\n/* Hover Effects */\n.ios-checkbox:hover .checkbox-wrapper {\n transform: scale(1.05);\n}\n\n/* Active Animation */\n.ios-checkbox:active .checkbox-wrapper {\n transform: scale(0.95);\n}\n\n/* Focus Styles */\n.ios-checkbox input:focus + .checkbox-wrapper .checkbox-bg {\n box-shadow: 0 0 0 4px var(--checkbox-bg);\n}\n\n/* Color Themes */\n.ios-checkbox.blue {\n --checkbox-color: #3b82f6;\n --checkbox-bg: #dbeafe;\n --checkbox-border: #93c5fd;\n}\n\n.ios-checkbox.green {\n --checkbox-color: #10b981;\n --checkbox-bg: #d1fae5;\n --checkbox-border: #6ee7b7;\n}\n\n.ios-checkbox.purple {\n --checkbox-color: #8b5cf6;\n --checkbox-bg: #ede9fe;\n --checkbox-border: #c4b5fd;\n}\n\n.ios-checkbox.red {\n --checkbox-color: #ef4444;\n --checkbox-bg: #fee2e2;\n --checkbox-border: #fca5a5;\n}\n\n/* Animation */\n@keyframes bounce {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.1);\n }\n}\n\n.ios-checkbox input:checked + .checkbox-wrapper {\n animation: bounce 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n"}

afraid-wasp-94

👁 实时预览

📝 源代码