{"html":"\n \n

\n \n

\n\n","css":".morphing-checkbox {\n --checkbox-size: 2.5em;\n --checkbox-color: #6366f1;\n --checkbox-color-hover: #4f46e5;\n --checkbox-shadow: rgba(99, 102, 241, 0.3);\n --checkmark-color: white;\n --cubic-bezier: cubic-bezier(0.16, 1, 0.3, 1);\n\n position: relative;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n}\n\n.morphing-checkbox input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.checkbox-body {\n position: relative;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n perspective: 25em;\n}\n\n.cube {\n position: absolute;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transition: transform 0.6s var(--cubic-bezier);\n}\n\n.cube div {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--checkbox-color);\n backface-visibility: hidden;\n border-radius: 0.3em;\n box-shadow: 0 0.2em 0.6em var(--checkbox-shadow);\n transform-style: preserve-3d;\n}\n\n.cube .front {\n transform: translateZ(calc(var(--checkbox-size) / 2));\n}\n.cube .back {\n transform: rotateY(180deg) translateZ(calc(var(--checkbox-size) / 2));\n}\n.cube .top {\n transform: rotateX(90deg) translateZ(calc(var(--checkbox-size) / 2));\n}\n.cube .bottom {\n transform: rotateX(-90deg) translateZ(calc(var(--checkbox-size) / 2));\n}\n.cube .left {\n transform: rotateY(-90deg) translateZ(calc(var(--checkbox-size) / 2));\n}\n.cube .right {\n transform: rotateY(90deg) translateZ(calc(var(--checkbox-size) / 2));\n}\n\n.morphing-checkbox:hover .cube div {\n background-color: var(--checkbox-color-hover);\n}\n\n.morphing-checkbox input:checked + .checkbox-body .cube {\n transform: rotateY(180deg) rotateZ(180deg);\n}\n\n.checkmark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 60%;\n height: 60%;\n fill: none;\n stroke: var(--checkmark-color);\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n z-index: 2;\n pointer-events: none;\n}\n\n.morphing-checkbox input:checked + .checkbox-body .checkmark {\n animation: check-animation 0.5s var(--cubic-bezier) forwards 0.3s;\n}\n\n@keyframes check-animation {\n 0% {\n transform: translate(-50%, -50%) scale(0);\n stroke-dashoffset: 24;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n 100% {\n transform: translate(-50%, -50%) scale(1);\n stroke-dashoffset: 0;\n }\n}\n\n.ripple {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.5);\n opacity: 0;\n z-index: 1;\n pointer-events: none;\n}\n\n.morphing-checkbox input:checked + .checkbox-body .ripple {\n animation: ripple 0.6s var(--cubic-bezier);\n}\n\n@keyframes ripple {\n 0% {\n width: 0;\n height: 0;\n opacity: 0.5;\n }\n 100% {\n width: 200%;\n height: 200%;\n opacity: 0;\n }\n}\n\n.morphing-checkbox input:focus + .checkbox-body::after {\n content: \"\";\n position: absolute;\n top: -0.3em;\n left: -0.3em;\n right: -0.3em;\n bottom: -0.3em;\n border-radius: 0.6em;\n border: 0.15em solid rgba(99, 102, 241, 0.4);\n pointer-events: none;\n opacity: 0;\n animation: focus-animation 0.3s var(--cubic-bezier) forwards;\n}\n\n@keyframes focus-animation {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.morphing-checkbox:active .cube {\n transform: scale(0.9);\n}\n\n.morphing-checkbox input:checked:active + .checkbox-body .cube {\n transform: scale(0.9) rotateY(180deg) rotateZ(180deg);\n}\n"}

bitter-bird-60

👁 实时预览

📝 源代码