{"html":"

\n \n \n \n \n \n \n \n

Checkbox

\n \n

\n","css":".checkbox-wrapper-33 {\n --s-xsmall: 0.625em;\n --s-small: 1.2em;\n --border-width: 1px;\n --c-primary: #5f11e8;\n --c-primary-20-percent-opacity: rgb(95 17 232 / 20%);\n --c-primary-10-percent-opacity: rgb(95 17 232 / 10%);\n --t-base: 0.4s;\n --t-fast: 0.2s;\n --e-in: ease-in;\n --e-out: cubic-bezier(0.11, 0.29, 0.18, 0.98);\n}\n\n.checkbox-wrapper-33 .visuallyhidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.checkbox-wrapper-33 .checkbox {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n color: white;\n}\n\n.checkbox-wrapper-33 .checkbox + .checkbox {\n margin-top: var(--s-small);\n}\n\n.checkbox-wrapper-33 .checkbox__symbol {\n display: inline-block;\n display: flex;\n margin-right: calc(var(--s-small) * 0.7);\n border: var(--border-width) solid var(--c-primary);\n position: relative;\n border-radius: 0.1em;\n width: 1.5em;\n height: 1.5em;\n transition: box-shadow var(--t-base) var(--e-out),\n background-color var(--t-base);\n box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);\n}\n\n.checkbox-wrapper-33 .checkbox__symbol:after {\n content: \"\";\n position: absolute;\n top: 0.5em;\n left: 0.5em;\n width: 0.25em;\n height: 0.25em;\n background-color: var(--c-primary-20-percent-opacity);\n opacity: 0;\n border-radius: 3em;\n transform: scale(1);\n transform-origin: 50% 50%;\n}\n\n.checkbox-wrapper-33 .checkbox .icon-checkbox {\n width: 1em;\n height: 1em;\n margin: auto;\n fill: none;\n stroke-width: 3;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-miterlimit: 10;\n color: var(--c-primary);\n display: inline-block;\n}\n\n.checkbox-wrapper-33 .checkbox .icon-checkbox path {\n transition: stroke-dashoffset var(--t-fast) var(--e-in);\n stroke-dasharray: 30px, 31px;\n stroke-dashoffset: 31px;\n}\n\n.checkbox-wrapper-33 .checkbox__textwrapper {\n margin: 0;\n}\n\n.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol:after {\n -webkit-animation: ripple-33 1.5s var(--e-out);\n animation: ripple-33 1.5s var(--e-out);\n}\n\n.checkbox-wrapper-33\n .checkbox__trigger:checked\n + .checkbox__symbol\n .icon-checkbox\n path {\n transition: stroke-dashoffset var(--t-base) var(--e-out);\n stroke-dashoffset: 0px;\n}\n\n.checkbox-wrapper-33 .checkbox__trigger:focus + .checkbox__symbol {\n box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);\n}\n\n@-webkit-keyframes ripple-33 {\n from {\n transform: scale(0);\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(20);\n }\n}\n\n@keyframes ripple-33 {\n from {\n transform: scale(0);\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(20);\n }\n}\n"}

perfect-mouse-3

👁 实时预览

📝 源代码