{"html":"\n \n

\n\n \n\n

\n\n

\n Supernova\n

\n\n","css":"/* ---------- wrapper ---------- */\n.cosmic-checkbox {\n --size: 28px;\n --clr-idle: #8b8fa3;\n --clr-active: #a855f7;\n --clr-glow: #c084fc;\n --clr-core: #e9d5ff;\n --clr-spark: #f0abfc;\n --duration: 0.6s;\n display: inline-flex;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n\n.cosmic-checkbox input {\n display: none;\n}\n\n.checkbox-container {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n/* ---------- the box ---------- */\n.checkbox-box {\n position: relative;\n width: var(--size);\n height: var(--size);\n border: 2px solid var(--clr-idle);\n border-radius: 8px;\n transition:\n border-color 0.3s,\n background 0.3s,\n box-shadow 0.3s,\n transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n/* idle hover */\n.cosmic-checkbox:hover .checkbox-box {\n border-color: var(--clr-glow);\n box-shadow: 0 0 8px rgba(168, 85, 247, 0.25);\n}\n\n/* Background Element */\n.checkbox-bg {\n position: absolute;\n inset: 0;\n border-radius: 6px;\n background: linear-gradient(135deg, #7c3aed, #a855f7);\n opacity: 0;\n transform: scale(0.5);\n transition:\n opacity 0.4s ease,\n transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 1;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-bg {\n opacity: 1;\n transform: scale(1);\n box-shadow:\n 0 0 12px rgba(168, 85, 247, 0.5),\n 0 0 30px rgba(168, 85, 247, 0.2),\n inset 0 0 8px rgba(233, 213, 255, 0.15);\n}\n\n/* ---------- checkmark ---------- */\n.checkmark {\n width: 16px;\n height: 16px;\n color: #fff;\n opacity: 0;\n transform: scale(0) rotate(-20deg);\n transition:\n opacity 0.25s ease,\n transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n z-index: 2;\n pointer-events: none;\n}\n\n.checkmark path {\n stroke-dasharray: 28;\n stroke-dashoffset: 28;\n transition: stroke-dashoffset 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;\n}\n\n/* ---------- label text ---------- */\n.label-text {\n font-family:\n \"Segoe UI\",\n system-ui,\n -apple-system,\n sans-serif;\n font-size: 15px;\n font-weight: 500;\n color: var(--clr-idle);\n letter-spacing: 0.3px;\n transition: color 0.35s;\n user-select: none;\n}\n\n/* ======================\n PARTICLES\n ====================== */\n.particle {\n position: absolute;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--clr-spark);\n opacity: 0;\n pointer-events: none;\n top: 50%;\n left: 50%;\n z-index: 3;\n}\n\n/* ======================\n SHOCKWAVE RINGS\n ====================== */\n.ring {\n position: absolute;\n inset: -8px;\n border-radius: 50%;\n border: 2px solid var(--clr-glow);\n opacity: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n/* ======================\n SPARK LINES\n ====================== */\n.spark {\n position: absolute;\n width: 2px;\n height: 10px;\n background: linear-gradient(to top, var(--clr-spark), transparent);\n opacity: 0;\n top: 50%;\n left: 50%;\n transform-origin: center center;\n pointer-events: none;\n border-radius: 2px;\n z-index: 3;\n}\n\n/* Position sparks in a radial pattern */\n.s1 {\n transform: rotate(0deg) translateY(-2px);\n}\n\n.s2 {\n transform: rotate(45deg) translateY(-2px);\n}\n\n.s3 {\n transform: rotate(90deg) translateY(-2px);\n}\n\n.s4 {\n transform: rotate(135deg) translateY(-2px);\n}\n\n.s5 {\n transform: rotate(180deg) translateY(-2px);\n}\n\n.s6 {\n transform: rotate(225deg) translateY(-2px);\n}\n\n.s7 {\n transform: rotate(270deg) translateY(-2px);\n}\n\n.s8 {\n transform: rotate(315deg) translateY(-2px);\n}\n\n/* ==========================================\n ✅ CHECKED STATE — the supernova ignites\n ========================================== */\n.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-box {\n border-color: var(--clr-active);\n /* Background moves to .checkbox-bg */\n transform: scale(1);\n animation: box-pulse 0.5s ease;\n}\n\n@keyframes box-pulse {\n 0% {\n transform: scale(1);\n }\n\n 30% {\n transform: scale(0.85);\n }\n\n 60% {\n transform: scale(1.15);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n/* checkmark draws in */\n.cosmic-checkbox input:checked ~ .checkbox-container .checkmark {\n opacity: 1;\n transform: scale(1) rotate(0deg);\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .checkmark path {\n stroke-dashoffset: 0;\n}\n\n/* label lights up */\n.cosmic-checkbox input:checked ~ .checkbox-container .label-text {\n color: var(--clr-core);\n}\n\n/* ---- Particle explosion ---- */\n.cosmic-checkbox input:checked ~ .checkbox-container .p1 {\n animation: particle-fly 0.65s ease-out forwards;\n --angle: -45deg;\n --dist: 22px;\n --clr: #f0abfc;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .p2 {\n animation: particle-fly 0.6s 0.05s ease-out forwards;\n --angle: -90deg;\n --dist: 26px;\n --clr: #c084fc;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .p3 {\n animation: particle-fly 0.55s 0.08s ease-out forwards;\n --angle: 0deg;\n --dist: 20px;\n --clr: #e879f9;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .p4 {\n animation: particle-fly 0.7s 0.03s ease-out forwards;\n --angle: 45deg;\n --dist: 24px;\n --clr: #d946ef;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .p5 {\n animation: particle-fly 0.5s 0.1s ease-out forwards;\n --angle: 135deg;\n --dist: 18px;\n --clr: #a78bfa;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .p6 {\n animation: particle-fly 0.65s 0.06s ease-out forwards;\n --angle: -135deg;\n --dist: 23px;\n --clr: #818cf8;\n}\n\n@keyframes particle-fly {\n 0% {\n opacity: 1;\n transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(1);\n background: var(--clr);\n }\n\n 60% {\n opacity: 1;\n transform: translate(-50%, -50%) rotate(var(--angle))\n translateY(calc(var(--dist) * -1)) scale(1.1);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) rotate(var(--angle))\n translateY(calc(var(--dist) * -1.4)) scale(0);\n }\n}\n\n/* ---- Shockwave rings ---- */\n.cosmic-checkbox input:checked ~ .checkbox-container .ring-1 {\n animation: shockwave 0.7s ease-out forwards;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .ring-2 {\n animation: shockwave 0.7s 0.12s ease-out forwards;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .ring-3 {\n animation: shockwave 0.7s 0.24s ease-out forwards;\n}\n\n@keyframes shockwave {\n 0% {\n opacity: 0.7;\n transform: scale(0.5);\n border-color: var(--clr-glow);\n }\n\n 50% {\n opacity: 0.4;\n border-color: var(--clr-spark);\n }\n\n 100% {\n opacity: 0;\n transform: scale(2.2);\n border-color: transparent;\n }\n}\n\n/* ---- Spark lines burst ---- */\n.cosmic-checkbox input:checked ~ .checkbox-container .s1 {\n animation: spark-burst 0.5s 0.05s ease-out forwards;\n --rot: 0deg;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .s2 {\n animation: spark-burst 0.45s 0.08s ease-out forwards;\n --rot: 45deg;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .s3 {\n animation: spark-burst 0.5s 0.03s ease-out forwards;\n --rot: 90deg;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .s4 {\n animation: spark-burst 0.55s 0.1s ease-out forwards;\n --rot: 135deg;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .s5 {\n animation: spark-burst 0.5s 0.06s ease-out forwards;\n --rot: 180deg;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .s6 {\n animation: spark-burst 0.45s 0.09s ease-out forwards;\n --rot: 225deg;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .s7 {\n animation: spark-burst 0.5s 0.04s ease-out forwards;\n --rot: 270deg;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .s8 {\n animation: spark-burst 0.55s 0.07s ease-out forwards;\n --rot: 315deg;\n}\n\n@keyframes spark-burst {\n 0% {\n opacity: 1;\n transform: rotate(var(--rot)) translateY(-4px) scaleY(0.5);\n }\n\n 50% {\n opacity: 0.9;\n transform: rotate(var(--rot)) translateY(-20px) scaleY(1.2);\n background: linear-gradient(to top, var(--clr-active), transparent);\n }\n\n 100% {\n opacity: 0;\n transform: rotate(var(--rot)) translateY(-30px) scaleY(0.3);\n }\n}\n\n/* ======================\n IDLE BREATHING GLOW\n A subtle ambient pulse\n when unchecked\n ====================== */\n.checkbox-box::before {\n content: \"\";\n position: absolute;\n inset: -3px;\n border-radius: 10px;\n background: radial-gradient(\n circle,\n rgba(168, 85, 247, 0.12),\n transparent 70%\n );\n opacity: 0;\n animation: idle-breathe 3s ease-in-out infinite;\n pointer-events: none;\n}\n\n@keyframes idle-breathe {\n 0%,\n 100% {\n opacity: 0;\n transform: scale(0.95);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.15);\n }\n}\n\n/* after check, the glow becomes steady */\n.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-box::before {\n animation: none;\n opacity: 0.6;\n transform: scale(1.2);\n background: radial-gradient(\n circle,\n rgba(168, 85, 247, 0.25),\n transparent 70%\n );\n transition:\n opacity 0.5s,\n transform 0.5s;\n}\n\n/* ======================\n AFTER-GLOW — persistent\n shimmer on checked state\n ====================== */\n.checkbox-box::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 8px;\n opacity: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.25) 0%,\n transparent 50%,\n rgba(255, 255, 255, 0.1) 100%\n );\n pointer-events: none;\n transition: opacity 0.4s 0.2s;\n}\n\n.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-box::after {\n opacity: 1;\n}\n\n/* ======================\n UNCHECKED TRANSITION\n smooth return\n ====================== */\n.cosmic-checkbox input:not(:checked) ~ .checkbox-container .checkbox-box {\n background: transparent;\n box-shadow: none;\n}\n\n.cosmic-checkbox input:not(:checked) ~ .checkbox-container .checkmark {\n opacity: 0;\n transform: scale(0) rotate(-20deg);\n}\n\n.cosmic-checkbox input:not(:checked) ~ .checkbox-container .checkmark path {\n stroke-dashoffset: 28;\n}\n\n/* ======================\n FOCUS-VISIBLE (a11y)\n ====================== */\n.cosmic-checkbox input:focus-visible ~ .checkbox-container .checkbox-box {\n outline: 2px solid var(--clr-glow);\n outline-offset: 3px;\n}\n"}

selfish-wasp-22

👁 实时预览

📝 源代码