{"html":"\n \n

\n\n","css":"/* Container styling */\n.container {\n display: inline-block;\n position: relative;\n cursor: pointer;\n user-select: none;\n}\n\n/* Hide default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* Wrapper for checkbox elements */\n.checkbox-wrapper {\n position: relative;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Checkmark (square transforming to star) */\n.checkmark {\n position: absolute;\n width: 32px;\n height: 32px;\n background: linear-gradient(135deg, #0a0a23, #1c2526);\n border: 2px solid #4b5eaa;\n border-radius: 12px;\n transition:\n transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),\n background 0.3s ease-in-out,\n border-color 0.3s ease,\n border-radius 0.3s ease;\n box-shadow: 0 0 8px rgba(75, 94, 170, 0.3);\n}\n\n/* Hover effect */\n.container:hover .checkmark {\n transform: scale(1.1);\n box-shadow: 0 0 12px rgba(75, 94, 170, 0.5);\n}\n\n/* Checked state: Transform to star shape */\n.container input:checked ~ .checkbox-wrapper .checkmark {\n background: linear-gradient(135deg, #ff5e62, #ffd452);\n border-color: #ffd452;\n border-radius: 50%;\n transform: rotate(45deg) scale(1.2);\n box-shadow: 0 0 20px rgba(255, 212, 82, 0.8);\n}\n\n/* Star checkmark symbol (pseudo-element) */\n.checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n left: 50%;\n top: 50%;\n width: 10px;\n height: 10px;\n background: transparent;\n border: 2px solid #fff;\n border-radius: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition:\n transform 0.3s cubic-bezier(0.4, 0, 0.2, 1.6),\n opacity 0.3s ease-in-out;\n}\n\n/* Show star when checked */\n.container input:checked ~ .checkbox-wrapper .checkmark::after {\n display: block;\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n}\n\n/* Nebula glow effect */\n.nebula-glow {\n position: absolute;\n width: 40px;\n height: 40px;\n background: radial-gradient(\n circle,\n rgba(75, 94, 170, 0.3) 10%,\n transparent 70%\n );\n border-radius: 50%;\n opacity: 0.5;\n transition:\n opacity 0.3s ease,\n transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Nebula swirl when checked */\n.container input:checked ~ .checkbox-wrapper .nebula-glow {\n opacity: 1;\n transform: rotate(180deg);\n background: radial-gradient(\n circle,\n rgba(255, 94, 170, 0.5) 10%,\n rgba(255, 212, 82, 0.3) 70%\n );\n animation: swirl 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Swirl animation keyframes */\n@keyframes swirl {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* Sparkle effect */\n.sparkle-container {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n/* Sparkle particles */\n.sparkle-container::before,\n.sparkle-container::after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 4px;\n background: #ffd452;\n border-radius: 50%;\n opacity: 0;\n transition: all 0.6s ease;\n}\n\n/* Sparkle animation when checked */\n.container input:checked ~ .checkbox-wrapper .sparkle-container::before {\n transform: translate(12px, -12px);\n opacity: 1;\n animation: twinkle 0.8s cubic-bezier(0.5, 0, 0.5, 1) forwards;\n}\n\n.container input:checked ~ .checkbox-wrapper .sparkle-container::after {\n transform: translate(-12px, 12px);\n background: #ff5e62;\n opacity: 1;\n animation: twinkle 0.8s cubic-bezier(0.5, 0, 0.5, 1) 0.2s forwards;\n}\n\n/* Twinkle animation keyframes */\n@keyframes twinkle {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(1.5) translate(10px, -10px);\n opacity: 0;\n }\n}\n\n/* Pulse effect on hover */\n.checkbox-wrapper::before {\n content: \"\";\n position: absolute;\n width: 48px;\n height: 48px;\n background: rgba(75, 94, 170, 0.2);\n border-radius: 50%;\n transform: scale(0);\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1.4);\n z-index: -1;\n}\n\n.container:hover .checkbox-wrapper::before {\n transform: scale(1);\n}\n\n/* Bounce animation when checked */\n.container input:checked ~ .checkbox-wrapper .checkmark {\n animation: bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n/* Bounce keyframes */\n@keyframes bounce {\n 0%,\n 100% {\n transform: rotate(45deg) scale(1.2);\n }\n 50% {\n transform: rotate(45deg) scale(1.4);\n }\n}\n"}

spicy-chipmunk-55

👁 实时预览

📝 源代码