{"html":"

\n \n \n \n

\n 1\n 0\n 1\n 0\n 1\n

\n \n

\n","css":".checkbox-container {\n position: relative;\n width: 50px;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.checkbox-input {\n display: none;\n}\n\n.checkbox-label {\n position: relative;\n width: 100%;\n height: 100%;\n background: #1a1a1a;\n border: 2px solid #00ff00;\n border-radius: 50%;\n box-shadow: 0 0 12px #00ff00;\n cursor: pointer;\n transition: all 0.3s ease;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* Grid background */\n.grid-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n rgba(0, 255, 0, 0.1),\n rgba(0, 255, 0, 0.1) 2px,\n transparent 2px,\n transparent 6px\n );\n opacity: 0.3;\n transition: opacity 0.3s ease;\n z-index: 0;\n animation: grid-shift 1.5s linear infinite paused;\n}\n\n/* Checkmark */\n.checkmark {\n position: absolute;\n width: 30px;\n height: 30px;\n border: 3px solid #00ff00;\n border-radius: 50%;\n opacity: 0;\n transition:\n opacity 0.3s ease,\n transform 0.3s ease;\n z-index: 2;\n}\n\n.checkmark::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 12px;\n height: 6px;\n border-left: 3px solid #00ff00;\n border-bottom: 3px solid #00ff00;\n transform: translate(-50%, -70%) rotate(-45deg);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n/* Glitch effects */\n.glitch-overlay-h {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(0, 255, 0, 0.2),\n transparent\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}\n\n.glitch-overlay-v {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 0deg,\n transparent,\n rgba(0, 255, 0, 0.15),\n transparent\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}\n\n/* Binary particles */\n.binary-particles {\n position: absolute;\n top: -20px;\n left: 0;\n width: 100%;\n height: 80px;\n pointer-events: none;\n z-index: 3;\n}\n\n.particle {\n position: absolute;\n color: #00ff00;\n font-size: 10px;\n opacity: 0;\n animation: particle-rise 1.2s linear infinite;\n}\n\n/* Hover state */\n.checkbox-label:hover {\n box-shadow: 0 0 20px #00ff00;\n transform: scale(1.05);\n}\n\n.checkbox-label:hover .glitch-overlay-h {\n opacity: 1;\n animation: glitch-h 1s infinite;\n}\n\n.checkbox-label:hover .glitch-overlay-v {\n opacity: 1;\n animation: glitch-v 0.8s infinite;\n}\n\n/* Checked state */\n.checkbox-input:checked + .checkbox-label {\n background: rgba(0, 255, 0, 0.2);\n border-color: #00ff00;\n box-shadow: 0 0 25px #00ff00;\n}\n\n.checkbox-input:checked + .checkbox-label .grid-bg {\n opacity: 0.6;\n animation-play-state: running;\n}\n\n.checkbox-input:checked + .checkbox-label .checkmark {\n opacity: 1;\n transform: rotate(360deg);\n animation: check-rotate 0.5s ease-in-out;\n}\n\n.checkbox-input:checked + .checkbox-label .checkmark::before {\n opacity: 1;\n animation: check-bounce 0.4s ease-in-out 0.1s;\n}\n\n.checkbox-input:checked + .checkbox-label .glitch-overlay-h {\n opacity: 0.8;\n animation: glitch-h 0.6s infinite;\n}\n\n.checkbox-input:checked + .checkbox-label .glitch-overlay-v {\n opacity: 0.8;\n animation: glitch-v 0.5s infinite;\n}\n\n/* Animations */\n@keyframes grid-shift {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 6px 6px;\n }\n}\n\n@keyframes glitch-h {\n 0% {\n transform: translateX(-100%);\n }\n 20% {\n transform: translateX(100%) skewX(5deg);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n@keyframes glitch-v {\n 0% {\n transform: translateY(-100%);\n }\n 30% {\n transform: translateY(100%) skewY(3deg);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n\n@keyframes check-rotate {\n 0% {\n transform: scale(0) rotate(0deg);\n }\n 50% {\n transform: scale(1.1) rotate(180deg);\n }\n 100% {\n transform: scale(1) rotate(360deg);\n }\n}\n\n@keyframes check-bounce {\n 0% {\n opacity: 0;\n transform: translate(-50%, -70%) rotate(-45deg) scale(0);\n }\n 50% {\n opacity: 1;\n transform: translate(-50%, -70%) rotate(-45deg) scale(1.2);\n }\n 100% {\n opacity: 1;\n transform: translate(-50%, -70%) rotate(-45deg) scale(1);\n }\n}\n\n@keyframes particle-rise {\n 0% {\n opacity: 0;\n transform: translateY(40px);\n }\n 20% {\n opacity: 0.7;\n }\n 100% {\n opacity: 0;\n transform: translateY(-20px);\n }\n}\n"}

nice-grasshopper-13

👁 实时预览

📝 源代码