{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n

\n \n

\n","css":".cyberpunk-checkbox-container {\n position: relative;\n}\n\n.cyber-checkbox {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n}\n\n.cyber-checkbox input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.checkbox {\n position: relative;\n width: 50px;\n height: 50px;\n background: linear-gradient(135deg, #1a0033, #0a0f1f);\n border: 2px solid #ff00ff;\n border-radius: 8px;\n box-shadow:\n inset 3px 3px 6px rgba(0, 0, 0, 0.5),\n inset -3px -3px 6px rgba(51, 25, 77, 0.2),\n 0 0 10px rgba(255, 0, 255, 0.3);\n transition: all 0.3s ease;\n transform: translateZ(10px);\n}\n\n.check-icon {\n position: absolute;\n top: 60%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n.label-text {\n margin-left: 10px;\n font-size: 18px;\n font-weight: bold;\n color: #ff00ff;\n text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);\n transition: all 0.3s ease;\n}\n\n.glow-layer {\n position: absolute;\n inset: -10px;\n border-radius: 12px;\n background: radial-gradient(circle, rgba(255, 0, 255, 0.2), transparent 70%);\n filter: blur(15px);\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n}\n\n.glitch-layer {\n position: absolute;\n inset: 0;\n border-radius: 8px;\n background: transparent;\n opacity: 0;\n z-index: 1;\n}\n\n/* Hover Effect */\n.cyber-checkbox:hover .checkbox {\n transform: translateZ(15px) scale(1.05);\n box-shadow:\n inset 3px 3px 6px rgba(0, 0, 0, 0.5),\n inset -3px -3px 6px rgba(51, 25, 77, 0.3),\n 0 0 15px rgba(255, 0, 255, 0.5);\n}\n\n.cyber-checkbox:hover .label-text {\n color: #00ffff;\n text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);\n}\n\n.cyber-checkbox:hover .glow-layer {\n opacity: 0.5;\n}\n\n/* Checked State */\n.cyber-checkbox input:checked + .checkbox {\n background: linear-gradient(135deg, #00ffff, #0a0f1f);\n border-color: #00ffff;\n box-shadow:\n inset 3px 3px 6px rgba(0, 0, 0, 0.5),\n inset -3px -3px 6px rgba(0, 255, 255, 0.2),\n 0 0 15px rgba(0, 255, 255, 0.5);\n animation: glitch 0.5s ease forwards;\n}\n\n.cyber-checkbox input:checked + .checkbox .check-icon {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n animation: check-bounce 0.4s ease-out;\n}\n\n.cyber-checkbox input:checked ~ .label-text {\n color: #00ffff;\n text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);\n}\n\n.cyber-checkbox input:checked ~ .glow-layer {\n background: radial-gradient(circle, rgba(0, 255, 255, 0.2), transparent 70%);\n opacity: 1;\n}\n\n.cyber-checkbox input:checked ~ .glitch-layer {\n opacity: 1;\n animation: glitch-flash 0.5s ease forwards;\n}\n\n/* Animations */\n@keyframes glitch {\n 0% {\n transform: translateZ(10px) skew(0deg);\n }\n 20% {\n transform: translateZ(15px) skew(5deg);\n }\n 40% {\n transform: translateZ(10px) skew(-3deg);\n }\n 60% {\n transform: translateZ(15px) skew(2deg);\n }\n 80% {\n transform: translateZ(10px) skew(-1deg);\n }\n 100% {\n transform: translateZ(15px) skew(0deg);\n }\n}\n\n@keyframes glitch-flash {\n 0%,\n 100% {\n opacity: 0;\n }\n 10% {\n opacity: 0.5;\n background: rgba(255, 0, 255, 0.1);\n transform: translate(2px, -1px);\n }\n 30% {\n opacity: 0.3;\n background: rgba(0, 255, 255, 0.1);\n transform: translate(-1px, 2px);\n }\n 50% {\n opacity: 0.4;\n background: rgba(255, 0, 255, 0.1);\n transform: translate(1px, -2px);\n }\n 70% {\n opacity: 0.2;\n background: rgba(0, 255, 255, 0.1);\n transform: translate(-2px, 1px);\n }\n}\n\n@keyframes check-bounce {\n 0% {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.2);\n opacity: 1;\n }\n 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n }\n}\n\n/* Idle Animation */\n.checkbox {\n animation: float 3s ease-in-out infinite;\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateZ(10px) translateY(0);\n }\n 50% {\n transform: translateZ(12px) translateY(-3px);\n }\n}\n\n.cyber-checkbox:hover .checkbox {\n animation: none;\n}\n"}

funny-dragonfly-11

👁 实时预览

📝 源代码