{"html":"\n \n

\n \n

\n\n","css":".neon-checkbox {\n --primary: #00ffaa;\n --primary-dark: #00cc88;\n --primary-light: #88ffdd;\n --size: 30px;\n position: relative;\n width: var(--size);\n height: var(--size);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n\n.neon-checkbox input {\n display: none;\n}\n\n.neon-checkbox__frame {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.neon-checkbox__box {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.8);\n border-radius: 4px;\n border: 2px solid var(--primary-dark);\n transition: all 0.4s ease;\n}\n\n.neon-checkbox__check-container {\n position: absolute;\n inset: 2px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.neon-checkbox__check {\n width: 80%;\n height: 80%;\n fill: none;\n stroke: var(--primary);\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 40;\n stroke-dashoffset: 40;\n transform-origin: center;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.neon-checkbox__glow {\n position: absolute;\n inset: -2px;\n border-radius: 6px;\n background: var(--primary);\n opacity: 0;\n filter: blur(8px);\n transform: scale(1.2);\n transition: all 0.4s ease;\n}\n\n.neon-checkbox__borders {\n position: absolute;\n inset: 0;\n border-radius: 4px;\n overflow: hidden;\n}\n\n.neon-checkbox__borders span {\n position: absolute;\n width: 40px;\n height: 1px;\n background: var(--primary);\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.neon-checkbox__borders span:nth-child(1) {\n top: 0;\n left: -100%;\n animation: borderFlow1 2s linear infinite;\n}\n\n.neon-checkbox__borders span:nth-child(2) {\n top: -100%;\n right: 0;\n width: 1px;\n height: 40px;\n animation: borderFlow2 2s linear infinite;\n}\n\n.neon-checkbox__borders span:nth-child(3) {\n bottom: 0;\n right: -100%;\n animation: borderFlow3 2s linear infinite;\n}\n\n.neon-checkbox__borders span:nth-child(4) {\n bottom: -100%;\n left: 0;\n width: 1px;\n height: 40px;\n animation: borderFlow4 2s linear infinite;\n}\n\n.neon-checkbox__particles span {\n position: absolute;\n width: 4px;\n height: 4px;\n background: var(--primary);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n top: 50%;\n left: 50%;\n box-shadow: 0 0 6px var(--primary);\n}\n\n.neon-checkbox__rings {\n position: absolute;\n inset: -20px;\n pointer-events: none;\n}\n\n.neon-checkbox__rings .ring {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: 1px solid var(--primary);\n opacity: 0;\n transform: scale(0);\n}\n\n.neon-checkbox__sparks span {\n position: absolute;\n width: 20px;\n height: 1px;\n background: linear-gradient(90deg, var(--primary), transparent);\n opacity: 0;\n}\n\n/* Hover Effects */\n.neon-checkbox:hover .neon-checkbox__box {\n border-color: var(--primary);\n transform: scale(1.05);\n}\n\n/* Checked State */\n.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__box {\n border-color: var(--primary);\n background: rgba(0, 255, 170, 0.1);\n}\n\n.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__check {\n stroke-dashoffset: 0;\n transform: scale(1.1);\n}\n\n.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__glow {\n opacity: 0.2;\n}\n\n.neon-checkbox\n input:checked\n ~ .neon-checkbox__frame\n .neon-checkbox__borders\n span {\n opacity: 1;\n}\n\n/* Particle Animations */\n.neon-checkbox\n input:checked\n ~ .neon-checkbox__frame\n .neon-checkbox__particles\n span {\n animation: particleExplosion 0.6s ease-out forwards;\n}\n\n.neon-checkbox\n input:checked\n ~ .neon-checkbox__frame\n .neon-checkbox__rings\n .ring {\n animation: ringPulse 0.6s ease-out forwards;\n}\n\n.neon-checkbox\n input:checked\n ~ .neon-checkbox__frame\n .neon-checkbox__sparks\n span {\n animation: sparkFlash 0.6s ease-out forwards;\n}\n\n/* Animations */\n@keyframes borderFlow1 {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(200%);\n }\n}\n\n@keyframes borderFlow2 {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(200%);\n }\n}\n\n@keyframes borderFlow3 {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-200%);\n }\n}\n\n@keyframes borderFlow4 {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(-200%);\n }\n}\n\n@keyframes particleExplosion {\n 0% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 100% {\n transform: translate(\n calc(-50% + var(--x, 20px)),\n calc(-50% + var(--y, 20px))\n )\n scale(0);\n opacity: 0;\n }\n}\n\n@keyframes ringPulse {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n\n@keyframes sparkFlash {\n 0% {\n transform: rotate(var(--r, 0deg)) translateX(0) scale(1);\n opacity: 1;\n }\n 100% {\n transform: rotate(var(--r, 0deg)) translateX(30px) scale(0);\n opacity: 0;\n }\n}\n\n/* Particle Positions */\n.neon-checkbox__particles span:nth-child(1) {\n --x: 25px;\n --y: -25px;\n}\n.neon-checkbox__particles span:nth-child(2) {\n --x: -25px;\n --y: -25px;\n}\n.neon-checkbox__particles span:nth-child(3) {\n --x: 25px;\n --y: 25px;\n}\n.neon-checkbox__particles span:nth-child(4) {\n --x: -25px;\n --y: 25px;\n}\n.neon-checkbox__particles span:nth-child(5) {\n --x: 35px;\n --y: 0px;\n}\n.neon-checkbox__particles span:nth-child(6) {\n --x: -35px;\n --y: 0px;\n}\n.neon-checkbox__particles span:nth-child(7) {\n --x: 0px;\n --y: 35px;\n}\n.neon-checkbox__particles span:nth-child(8) {\n --x: 0px;\n --y: -35px;\n}\n.neon-checkbox__particles span:nth-child(9) {\n --x: 20px;\n --y: -30px;\n}\n.neon-checkbox__particles span:nth-child(10) {\n --x: -20px;\n --y: 30px;\n}\n.neon-checkbox__particles span:nth-child(11) {\n --x: 30px;\n --y: 20px;\n}\n.neon-checkbox__particles span:nth-child(12) {\n --x: -30px;\n --y: -20px;\n}\n\n/* Spark Rotations */\n.neon-checkbox__sparks span:nth-child(1) {\n --r: 0deg;\n top: 50%;\n left: 50%;\n}\n.neon-checkbox__sparks span:nth-child(2) {\n --r: 90deg;\n top: 50%;\n left: 50%;\n}\n.neon-checkbox__sparks span:nth-child(3) {\n --r: 180deg;\n top: 50%;\n left: 50%;\n}\n.neon-checkbox__sparks span:nth-child(4) {\n --r: 270deg;\n top: 50%;\n left: 50%;\n}\n\n/* Ring Delays */\n.neon-checkbox__rings .ring:nth-child(1) {\n animation-delay: 0s;\n}\n.neon-checkbox__rings .ring:nth-child(2) {\n animation-delay: 0.1s;\n}\n.neon-checkbox__rings .ring:nth-child(3) {\n animation-delay: 0.2s;\n}\n"}

hot-dragonfly-56

👁 实时预览

📝 源代码