{"html":"\n \n

\n \n \n \n

\n\n\n\n \n

\n \n \n \n

\n\n","css":".checkbox-container {\n --checkbox-size: 32px;\n --border-radius: 50%;\n --primary-color: #ffc008;\n --checkmark-color: #593f28;\n\n display: block;\n position: relative;\n cursor: pointer;\n user-select: none;\n border-radius: var(--border-radius);\n}\n\n/* Hide the default checkbox */\n.checkbox-container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* Create a custom checkbox */\n.checkbox-container .checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: var(--checkbox-size);\n width: var(--checkbox-size);\n background-color: #e9eaeb;\n border-radius: inherit;\n border: 1px solid #d5d7da;\n}\n\n.checkbox-container .checkmark:before {\n content: \"\";\n position: absolute;\n inset: 15%;\n background: white;\n border-radius: inherit;\n box-shadow:\n 0px 1px 1.1px rgba(0, 0, 0, 0.12),\n 0px 10px 10px rgba(0, 0, 0, 0.12);\n z-index: 1;\n transition: scale 0.2s ease-in-out;\n}\n\n.checkbox-container .checkmark svg {\n scale: 0;\n fill: var(--checkmark-color);\n rotate: -30deg;\n position: relative;\n width: 80%;\n height: auto;\n z-index: 2;\n left: 25%;\n justify-content: center;\n transform-origin: 25% 75%;\n transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.checkbox-container:hover .checkmark:before {\n scale: 1.1;\n}\n\n.checkbox-container:active .checkmark:before {\n scale: 0.9;\n}\n\n/* When the checkbox is checked.... */\n.checkbox-container input:checked ~ .checkmark {\n background-color: var(--primary-color);\n}\n\n.checkbox-container input:checked ~ .checkmark svg {\n scale: 1;\n rotate: 0deg;\n}\n"}

tidy-snake-71

👁 实时预览

📝 源代码