{"html":"\n \n \n \n","css":".checkbox {\n --border-default: #bbbbc1;\n --border-hover: #9898a3;\n --active: #6E7BF2;\n --active-tick: #ffffff;\n display: block;\n width: 18px;\n height: 18px;\n cursor: pointer;\n position: relative;\n -webkit-tap-highlight-color: transparent;\n}\n\n.checkbox svg {\n display: block;\n position: absolute;\n}\n\n.checkbox input {\n display: block;\n outline: none;\n border: none;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 36%/36%;\n box-shadow: inset 0 0 0 1.5px var(--border, var(--border-default));\n background: var(--background, transparent);\n transition: background 0.25s linear, box-shadow 0.25s linear;\n}\n\n.checkbox input + svg {\n width: 21px;\n height: 18px;\n left: 0;\n top: 0;\n color: var(--active);\n}\n\n.checkbox input + svg .tick {\n stroke-dasharray: 20;\n stroke-dashoffset: var(--stroke-dashoffset, 20);\n transition: stroke-dashoffset 0.2s;\n}\n\n.checkbox input + svg .tick.mask {\n stroke: var(--active-tick);\n}\n\n.checkbox input + svg + svg {\n width: 11px;\n height: 11px;\n fill: none;\n stroke: var(--active);\n stroke-width: 1.25;\n stroke-linecap: round;\n top: -6px;\n right: -10px;\n stroke-dasharray: 4.5px;\n stroke-dashoffset: 13.5px;\n pointer-events: none;\n -webkit-animation: var(--animation, none) 0.2s ease 0.175s;\n animation: var(--animation, none) 0.2s ease 0.175s;\n}\n\n.checkbox input:checked {\n --background: var(--active);\n --border: var(--active);\n}\n\n.checkbox input:checked + svg {\n --stroke-dashoffset: 0;\n}\n\n.checkbox input:checked + svg + svg {\n --animation: check95;\n}\n\n.checkbox:hover input:not(:checked) {\n --border: var(--border-hover);\n}\n\n@keyframes check95 {\n 100% {\n stroke-dashoffset: 4.5px;\n }\n}"}

witty-emu-55

👁 实时预览

📝 源代码