{"html":"\n \n \n

\n \n

\n \n\n","css":".cyber-checkbox {\n --checkbox-size: 24px;\n --checkbox-color: #5c67ff;\n --checkbox-check-color: #ffffff;\n --checkbox-hover-color: #4c57ef;\n --checkbox-spark-offset: -20px;\n\n position: relative;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n}\n\n.cyber-checkbox input {\n display: none;\n}\n\n.cyber-checkbox__mark {\n position: relative;\n display: inline-block;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n}\n\n.cyber-checkbox__box {\n position: absolute;\n inset: 0;\n border: 2px solid var(--checkbox-color);\n border-radius: 4px;\n background: transparent;\n transition: all 0.2s ease;\n}\n\n.cyber-checkbox__check {\n position: absolute;\n inset: 0;\n padding: 2px;\n stroke: var(--checkbox-check-color);\n stroke-width: 2px;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n transform: scale(0);\n transition: transform 0.2s ease;\n}\n\n.cyber-checkbox__effects {\n position: absolute;\n inset: var(--checkbox-spark-offset);\n pointer-events: none;\n}\n\n.cyber-checkbox__spark {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 2px;\n height: 2px;\n background: var(--checkbox-color);\n border-radius: 50%;\n opacity: 0;\n transform-origin: center center;\n}\n\n/* Hover */\n.cyber-checkbox:hover .cyber-checkbox__box {\n border-color: var(--checkbox-hover-color);\n box-shadow: 0 0 0 2px rgba(92, 103, 255, 0.1);\n}\n\n/* Checked */\n.cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__box {\n background: var(--checkbox-color);\n border-color: var(--checkbox-color);\n}\n\n.cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__check {\n transform: scale(1);\n}\n\n/* Spark Animation */\n.cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__spark {\n animation: spark 0.4s ease-out;\n}\n\n.cyber-checkbox__spark:nth-child(1) {\n transform: rotate(0deg) translateX(var(--checkbox-spark-offset));\n}\n.cyber-checkbox__spark:nth-child(2) {\n transform: rotate(90deg) translateX(var(--checkbox-spark-offset));\n}\n.cyber-checkbox__spark:nth-child(3) {\n transform: rotate(180deg) translateX(var(--checkbox-spark-offset));\n}\n.cyber-checkbox__spark:nth-child(4) {\n transform: rotate(270deg) translateX(var(--checkbox-spark-offset));\n}\n\n@keyframes spark {\n 0% {\n opacity: 0;\n transform: scale(0) rotate(0deg) translateX(var(--checkbox-spark-offset));\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: scale(1) rotate(0deg)\n translateX(calc(var(--checkbox-spark-offset) * 1.5));\n }\n}\n\n/* Active */\n.cyber-checkbox:active .cyber-checkbox__box {\n transform: scale(0.9);\n}\n\n/* Focus */\n.cyber-checkbox input:focus + .cyber-checkbox__mark .cyber-checkbox__box {\n box-shadow: 0 0 0 4px rgba(92, 103, 255, 0.2);\n}\n\n.cyber-checkbox__particles {\n position: absolute;\n inset: -50%;\n pointer-events: none;\n}\n\n.cyber-checkbox__particles div {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--checkbox-color);\n opacity: 0;\n}\n\n/* Particle animations for check */\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-1 {\n animation: particle-1 0.4s ease-out forwards;\n}\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-2 {\n animation: particle-2 0.4s ease-out forwards 0.1s;\n}\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-3 {\n animation: particle-3 0.4s ease-out forwards 0.15s;\n}\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-4 {\n animation: particle-4 0.4s ease-out forwards 0.05s;\n}\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-5 {\n animation: particle-5 0.4s ease-out forwards 0.12s;\n}\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-6 {\n animation: particle-6 0.4s ease-out forwards 0.08s;\n}\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-7 {\n animation: particle-7 0.4s ease-out forwards 0.18s;\n}\n.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-8 {\n animation: particle-8 0.4s ease-out forwards 0.15s;\n}\n\n/* Particle animations for uncheck */\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-1 {\n animation: particle-out-1 0.4s ease-out forwards;\n}\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-2 {\n animation: particle-out-2 0.4s ease-out forwards 0.1s;\n}\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-3 {\n animation: particle-out-3 0.4s ease-out forwards 0.15s;\n}\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-4 {\n animation: particle-out-4 0.4s ease-out forwards 0.05s;\n}\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-5 {\n animation: particle-out-5 0.4s ease-out forwards 0.12s;\n}\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-6 {\n animation: particle-out-6 0.4s ease-out forwards 0.08s;\n}\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-7 {\n animation: particle-out-7 0.4s ease-out forwards 0.18s;\n}\n.cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-8 {\n animation: particle-out-8 0.4s ease-out forwards 0.15s;\n}\n\n/* Particle keyframes for check */\n@keyframes particle-1 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(-20px, -20px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes particle-2 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(20px, -20px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes particle-3 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(20px, 20px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes particle-4 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(-20px, 20px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes particle-5 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(-30px, 0px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes particle-6 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(30px, 0px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes particle-7 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0px, -30px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes particle-8 {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0px, 30px) scale(1);\n opacity: 0;\n }\n}\n\n/* Particle keyframes for uncheck */\n@keyframes particle-out-1 {\n 0% {\n transform: translate(-20px, -20px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-out-2 {\n 0% {\n transform: translate(20px, -20px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-out-3 {\n 0% {\n transform: translate(20px, 20px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-out-4 {\n 0% {\n transform: translate(-20px, 20px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-out-5 {\n 0% {\n transform: translate(-30px, 0px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-out-6 {\n 0% {\n transform: translate(30px, 0px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-out-7 {\n 0% {\n transform: translate(0px, -30px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-out-8 {\n 0% {\n transform: translate(0px, 30px) scale(1);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n}\n"}

splendid-squid-26

👁 实时预览

📝 源代码