{"html":"

\n \n \n

\n \n

\n\n

\n \n

\n","css":".hyper-checkbox-wrapper {\n --hyper-size: 32px;\n --hyper-primary: #fc03f8;\n --hyper-secondary: #03e9f4;\n --hyper-bg: #111;\n --hyper-transition: 0.3s;\n\n position: relative;\n display: inline-flex;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.hyper-checkbox-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.hyper-checkbox {\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n}\n\n.hyper-checkbox-container {\n position: relative;\n width: var(--hyper-size);\n height: var(--hyper-size);\n perspective: 500px;\n}\n\n.hyper-checkbox-box {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 8px;\n background: var(--hyper-bg);\n overflow: hidden;\n transform-style: preserve-3d;\n transition: transform var(--hyper-transition)\n cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.hyper-box-border {\n position: absolute;\n inset: 0;\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n transition: all var(--hyper-transition) ease;\n}\n\n.hyper-box-fill {\n position: absolute;\n inset: 0;\n border-radius: 6px;\n background: linear-gradient(\n 135deg,\n var(--hyper-primary),\n var(--hyper-secondary)\n );\n opacity: 0;\n transform: scale(0.5);\n filter: brightness(0.7);\n transition: all var(--hyper-transition) cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.hyper-check-mark {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: scale(0);\n opacity: 0;\n transition: all var(--hyper-transition) cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 2;\n}\n\n.hyper-check-mark svg {\n width: 20px;\n height: 20px;\n fill: white;\n filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));\n}\n\n.hyper-box-glitch {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 45deg,\n transparent 0%,\n rgba(255, 255, 255, 0.2) 50%,\n transparent 100%\n );\n opacity: 0;\n transform: translateX(-100%);\n z-index: 1;\n}\n\n/* Effetti contenitore */\n.hyper-effects-container {\n position: absolute;\n inset: -50px;\n pointer-events: none;\n overflow: hidden;\n}\n\n/* Onde di energia */\n.hyper-energy-wave {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n border: 2px solid transparent;\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n z-index: -1;\n}\n\n.wave-1 {\n border-color: var(--hyper-primary);\n}\n\n.wave-2 {\n border-color: var(--hyper-secondary);\n}\n\n.wave-3 {\n border: 4px solid rgba(255, 255, 255, 0.3);\n}\n\n/* Particelle */\n.hyper-particles {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 1px;\n height: 1px;\n}\n\n.hyper-particle {\n position: absolute;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--hyper-primary);\n box-shadow: 0 0 10px var(--hyper-primary);\n transform: scale(0) translate(0, 0);\n opacity: 0;\n}\n\n.p1,\n.p5,\n.p9 {\n background: var(--hyper-primary);\n}\n.p2,\n.p6,\n.p10 {\n background: var(--hyper-secondary);\n}\n.p3,\n.p7,\n.p11 {\n background: white;\n}\n.p4,\n.p8,\n.p12 {\n background: #7bffaf;\n}\n\n/* Flash */\n.hyper-flash {\n position: absolute;\n inset: 0;\n background: white;\n opacity: 0;\n z-index: 10;\n pointer-events: none;\n}\n\n/* Effetto galassia */\n.hyper-galaxy {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n}\n\n.hyper-galaxy-stars {\n position: absolute;\n inset: 0;\n background-image: radial-gradient(white 1px, transparent 1px);\n background-size: 10px 10px;\n animation: hyper-stars-rotate 10s linear infinite;\n opacity: 0.8;\n}\n\n.hyper-galaxy-nebula {\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at center,\n var(--hyper-secondary) 0%,\n var(--hyper-primary) 30%,\n transparent 70%\n );\n opacity: 0.3;\n filter: blur(5px);\n}\n\n/* Onda d'urto */\n.hyper-shockwave {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background: radial-gradient(\n circle at center,\n transparent 30%,\n rgba(255, 255, 255, 0.3) 30.5%,\n transparent 31%\n );\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n pointer-events: none;\n}\n\n/* Indicatore hover */\n.hyper-hover-indicator {\n position: absolute;\n inset: -4px;\n border-radius: 10px;\n border: 2px solid transparent;\n opacity: 0;\n transition: all 0.3s ease;\n pointer-events: none;\n}\n\n.hyper-hover-pulse {\n position: absolute;\n inset: 0;\n border-radius: 10px;\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);\n}\n\n/* Label styling */\n.hyper-checkbox-label {\n display: flex;\n flex-direction: column;\n}\n\n.hyper-label-text {\n font-size: 14px;\n color: #e4e4e4;\n transition: color var(--hyper-transition) ease;\n}\n\n.hyper-label-status {\n font-size: 10px;\n position: relative;\n height: 15px;\n overflow: hidden;\n}\n\n.hyper-label-status-off,\n.hyper-label-status-on {\n position: absolute;\n transition: transform 0.3s ease;\n}\n\n.hyper-label-status-off {\n color: #666;\n transform: translateY(0);\n}\n\n.hyper-label-status-on {\n background: linear-gradient(\n 90deg,\n var(--hyper-primary),\n var(--hyper-secondary)\n );\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transform: translateY(15px);\n}\n\n/* Stato attivo */\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-box-fill {\n opacity: 1;\n transform: scale(1);\n filter: brightness(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-check-mark {\n opacity: 1;\n transform: scale(1) rotate(5deg);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-box-border {\n border-color: transparent;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-checkbox-box {\n transform: translateZ(10px) rotateY(10deg) rotateX(-10deg);\n box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-label-text {\n color: white;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-label-status-off {\n transform: translateY(-15px);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-label-status-on {\n transform: translateY(0);\n}\n\n/* Animazioni straordinarie al check */\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-box-glitch {\n animation: hyper-glitch 0.8s forwards;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-flash {\n animation: hyper-flash 0.3s ease-out;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-energy-wave.wave-1 {\n animation: hyper-wave 2s cubic-bezier(0, 0.55, 0.45, 1) forwards;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-energy-wave.wave-2 {\n animation: hyper-wave 2s 0.15s cubic-bezier(0, 0.55, 0.45, 1) forwards;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-energy-wave.wave-3 {\n animation: hyper-wave 2s 0.3s cubic-bezier(0, 0.55, 0.45, 1) forwards;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-shockwave {\n animation: hyper-shockwave 1s cubic-bezier(0, 0.55, 0.45, 1) forwards;\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-galaxy {\n animation: hyper-galaxy 1.5s forwards;\n}\n\n/* Animazione particelle */\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle {\n animation: hyper-particle 1s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p1 {\n animation-delay: 0.1s;\n transform: translate(30px, -40px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p2 {\n animation-delay: 0.15s;\n transform: translate(50px, -20px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p3 {\n animation-delay: 0.2s;\n transform: translate(60px, 15px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p4 {\n animation-delay: 0.15s;\n transform: translate(40px, 40px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p5 {\n animation-delay: 0.1s;\n transform: translate(10px, 50px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p6 {\n animation-delay: 0.15s;\n transform: translate(-20px, 40px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p7 {\n animation-delay: 0.2s;\n transform: translate(-40px, 20px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p8 {\n animation-delay: 0.15s;\n transform: translate(-50px, -10px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p9 {\n animation-delay: 0.1s;\n transform: translate(-40px, -40px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p10 {\n animation-delay: 0.05s;\n transform: translate(-20px, -50px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p11 {\n animation-delay: 0.1s;\n transform: translate(0, -60px) scale(1);\n}\n\n.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p12 {\n animation-delay: 0.15s;\n transform: translate(20px, -50px) scale(1);\n}\n\n/* Hover effect */\n.hyper-checkbox:hover .hyper-hover-indicator {\n opacity: 1;\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.hyper-checkbox:hover .hyper-hover-pulse {\n animation: hyper-pulse 1.5s infinite;\n}\n\n/* Focus styles */\n.hyper-checkbox-input:focus + .hyper-checkbox .hyper-hover-indicator {\n opacity: 1;\n border-color: rgba(255, 255, 255, 0.3);\n}\n\n/* Keyframes per animazioni spettacolari */\n@keyframes hyper-wave {\n 0% {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0.8;\n }\n 100% {\n transform: translate(-50%, -50%) scale(2.5);\n opacity: 0;\n }\n}\n\n@keyframes hyper-particle {\n 0% {\n transform: scale(0) translate(0, 0);\n opacity: 0;\n }\n 15% {\n opacity: 1;\n }\n 70% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform-origin: center center;\n }\n}\n\n@keyframes hyper-flash {\n 0% {\n opacity: 0.8;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes hyper-glitch {\n 0% {\n transform: translateX(-100%);\n opacity: 0.8;\n }\n 60% {\n transform: translateX(100%);\n opacity: 0.8;\n }\n 100% {\n transform: translateX(100%);\n opacity: 0;\n }\n}\n\n@keyframes hyper-galaxy {\n 0% {\n width: 0;\n height: 0;\n opacity: 0;\n }\n 20% {\n width: 150px;\n height: 150px;\n opacity: 1;\n }\n 70% {\n width: 150px;\n height: 150px;\n opacity: 1;\n }\n 100% {\n width: 200px;\n height: 200px;\n opacity: 0;\n }\n}\n\n@keyframes hyper-stars-rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes hyper-shockwave {\n 0% {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n }\n 20% {\n opacity: 0.5;\n }\n 100% {\n transform: translate(-50%, -50%) scale(2);\n opacity: 0;\n }\n}\n\n@keyframes hyper-pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);\n }\n}\n"}

witty-moth-2

👁 实时预览

📝 源代码