{"html":"

\n \n

\n","css":"/* Container styling */\n.button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #1a1a3d; /* Deep indigo background */\n border-radius: 4px;\n perspective: 800px; /* Reduced perspective for a flatter look */\n}\n\n/* Hacker button base */\n.hacker-button {\n position: relative;\n padding: 16px 32px;\n background: linear-gradient(45deg, #2b2b5c, #3a3a7a); /* Indigo gradient */\n border: none;\n border-radius: 4px; /* Sharp, techy corners */\n cursor: pointer;\n overflow: hidden;\n transform-style: preserve-3d;\n transition: all 0.3s ease;\n transform: rotateX(0deg) rotateY(0deg);\n box-shadow:\n 0 0 20px rgba(75, 75, 255, 0.2),\n 0 0 10px rgba(0, 255, 153, 0.1); /* Indigo and green glow */\n animation: terminal-pulse 2.5s infinite ease-in-out;\n}\n\n/* Glitch Overlay 1 (Indigo) */\n.hacker-button::before {\n content: \"Access\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) translateZ(15px);\n color: rgba(75, 75, 255, 0.4); /* Indigo glitch */\n font-family: \"Courier New\", monospace; /* Terminal font */\n font-size: 18px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n opacity: 0;\n pointer-events: none;\n animation: glitch-overlay-1 1.5s infinite steps(4);\n}\n\n/* Glitch Overlay 2 (Green) */\n.hacker-button::after {\n content: \"Access\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) translateZ(15px);\n color: rgba(0, 255, 153, 0.3); /* Hacker green */\n font-family: \"Courier New\", monospace;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n opacity: 0;\n pointer-events: none;\n animation: glitch-overlay-2 1.8s infinite steps(6);\n}\n\n/* Light Source */\n.hacker-button .glitch-layer::before {\n content: \"\";\n position: absolute;\n top: -100%;\n left: 50%;\n width: 50px;\n height: 200%;\n background: radial-gradient(\n circle,\n rgba(75, 75, 255, 0.3) 0%,\n /* Indigo light */ rgba(0, 255, 153, 0.2) 50%,\n /* Green blend */ transparent 70%\n );\n transform: translateX(-50%) translateZ(40px);\n opacity: 0.5;\n mix-blend-mode: overlay;\n animation: scan-flicker 2s infinite linear;\n}\n\n/* Text Layer */\n.hacker-text {\n position: relative;\n z-index: 3;\n color: #b3b3ff; /* Light indigo */\n font-family: \"Courier New\", monospace; /* Hacker font */\n font-size: 18px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n transform: translateZ(10px);\n filter: drop-shadow(0 0 4px rgba(75, 75, 255, 0.4));\n animation: text-flicker 1s infinite steps(8);\n}\n\n/* Hacker Shine */\n.hacker-shine {\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(75, 75, 255, 0.2),\n /* Indigo */ rgba(0, 255, 153, 0.2),\n /* Green */ transparent\n );\n transform: rotate(45deg) translateZ(5px);\n transition: all 0.5s ease;\n z-index: 2;\n opacity: 0;\n mix-blend-mode: screen;\n}\n\n/* Hacker Border */\n.hacker-border {\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 2px;\n background: linear-gradient(\n 45deg,\n rgba(75, 75, 255, 0.4),\n /* Indigo */ rgba(0, 255, 153, 0.3) /* Green */\n );\n z-index: 1;\n opacity: 0.6;\n transform: translateZ(3px);\n filter: blur(1px);\n animation: border-glitch 1.2s infinite steps(4);\n}\n\n/* Depth Layer */\n.hacker-depth {\n position: absolute;\n inset: 0;\n background: rgba(20, 20, 60, 0.5); /* Dark indigo */\n border-radius: 4px;\n transform: translateZ(-10px);\n box-shadow:\n 0 0 25px rgba(75, 75, 255, 0.1),\n inset 0 0 10px rgba(0, 255, 153, 0.05);\n}\n\n/* Data Stream (Hacker Rain) */\n.data-stream {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to bottom,\n rgba(75, 75, 255, 0.05),\n rgba(0, 255, 153, 0.05),\n transparent\n );\n transform: translateZ(-5px);\n overflow: hidden;\n z-index: 0;\n animation: data-flow 5s infinite linear;\n}\n\n/* Glitch Layer */\n.glitch-layer {\n position: absolute;\n inset: 0;\n background: rgba(75, 75, 255, 0.1); /* Indigo glitch */\n transform: translateZ(10px);\n opacity: 0;\n animation: glitch-layer 2s infinite steps(5);\n}\n\n/* Hover Effects */\n.hacker-button:hover {\n transform: rotateX(10deg) rotateY(10deg) translateZ(-20px);\n box-shadow:\n 0 15px 30px rgba(20, 20, 60, 0.5),\n 0 0 40px rgba(75, 75, 255, 0.3),\n 0 0 20px rgba(0, 255, 153, 0.2);\n animation: terminal-pulse 0.8s infinite ease-in-out;\n}\n\n.hacker-button:hover::before,\n.hacker-button:hover::after,\n.hacker-button:hover .glitch-layer {\n opacity: 0.4;\n}\n\n.hacker-button:hover .hacker-shine {\n transform: translateX(50%) rotate(45deg) translateZ(10px);\n opacity: 0.8;\n}\n\n.hacker-button:hover .hacker-text {\n color: #00ff99; /* Green */\n transform: translateZ(25px);\n filter: drop-shadow(0 0 8px rgba(0, 255, 153, 0.5));\n}\n\n.hacker-button:hover .hacker-border {\n opacity: 1;\n transform: translateZ(8px);\n background: linear-gradient(\n 45deg,\n rgba(75, 75, 255, 0.7),\n rgba(0, 255, 153, 0.6)\n );\n filter: blur(1.5px) brightness(1.3);\n}\n\n.hacker-button:hover .hacker-depth {\n transform: translateZ(-20px);\n box-shadow:\n 0 0 35px rgba(75, 75, 255, 0.2),\n inset 0 0 15px rgba(0, 255, 153, 0.1);\n}\n\n.hacker-button:hover .data-stream {\n animation: data-flow 2s infinite linear;\n}\n\n/* Active Effects */\n.hacker-button:active {\n transform: rotateX(5deg) rotateY(5deg) translateZ(0px);\n transition: all 0.2s ease;\n box-shadow:\n 0 5px 15px rgba(20, 20, 60, 0.4),\n 0 0 20px rgba(75, 75, 255, 0.2);\n}\n\n.hacker-button:active::before,\n.hacker-button:active::after,\n.hacker-button:active .glitch-layer {\n opacity: 0;\n}\n\n.hacker-button:active .hacker-shine {\n opacity: 1;\n transform: translateX(70%) rotate(45deg) translateZ(5px);\n}\n\n.hacker-button:active .hacker-text {\n color: #4b4bff; /* Indigo */\n transform: translateZ(10px);\n filter: drop-shadow(0 0 6px rgba(75, 75, 255, 0.5));\n}\n\n.hacker-button:active .hacker-depth {\n transform: translateZ(-5px);\n}\n\n/* Hacker Animations */\n@keyframes terminal-pulse {\n 0% {\n box-shadow:\n 0 0 20px rgba(75, 75, 255, 0.2),\n 0 0 10px rgba(0, 255, 153, 0.1);\n }\n 50% {\n box-shadow:\n 0 0 30px rgba(75, 75, 255, 0.3),\n 0 0 15px rgba(0, 255, 153, 0.15);\n }\n 100% {\n box-shadow:\n 0 0 20px rgba(75, 75, 255, 0.2),\n 0 0 10px rgba(0, 255, 153, 0.1);\n }\n}\n\n@keyframes scan-flicker {\n 0% {\n opacity: 0.5;\n transform: translateX(-50%) translateZ(40px);\n }\n 20% {\n opacity: 0.7;\n }\n 25% {\n opacity: 0.3;\n }\n 50% {\n opacity: 0.6;\n transform: translateX(-50%) translateZ(45px);\n }\n 55% {\n opacity: 0.2;\n }\n 100% {\n opacity: 0.5;\n transform: translateX(-50%) translateZ(40px);\n }\n}\n\n@keyframes text-flicker {\n 0% {\n transform: translateZ(10px);\n opacity: 1;\n }\n 5% {\n transform: translateZ(10px) translateX(-2px);\n opacity: 0.8;\n }\n 10% {\n transform: translateZ(10px) translateX(2px);\n opacity: 0.6;\n }\n 15% {\n opacity: 0.9;\n }\n 100% {\n transform: translateZ(10px);\n opacity: 1;\n }\n}\n\n@keyframes glitch-overlay-1 {\n 0% {\n opacity: 0.4;\n transform: translate(-50%, -50%) translateZ(15px) translateX(-3px);\n }\n 20% {\n opacity: 0.2;\n transform: translate(-50%, -50%) translateZ(15px) translateX(3px);\n }\n 25% {\n opacity: 0;\n }\n 50% {\n opacity: 0.3;\n transform: translate(-50%, -50%) translateZ(15px) translateY(-2px);\n }\n 55% {\n opacity: 0;\n }\n 100% {\n opacity: 0.4;\n transform: translate(-50%, -50%) translateZ(15px) translateX(-1px);\n }\n}\n\n@keyframes glitch-overlay-2 {\n 0% {\n opacity: 0.3;\n transform: translate(-50%, -50%) translateZ(15px) translateX(4px);\n }\n 15% {\n opacity: 0.1;\n transform: translate(-50%, -50%) translateZ(15px) translateX(-4px);\n }\n 20% {\n opacity: 0;\n }\n 40% {\n opacity: 0.2;\n transform: translate(-50%, -50%) translateZ(15px) translateY(3px);\n }\n 45% {\n opacity: 0;\n }\n 100% {\n opacity: 0.3;\n transform: translate(-50%, -50%) translateZ(15px) translateX(2px);\n }\n}\n\n@keyframes glitch-layer {\n 0% {\n opacity: 0.2;\n transform: translateZ(10px) translateX(-4px);\n clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);\n }\n 25% {\n opacity: 0.1;\n transform: translateZ(10px) translateX(4px);\n clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);\n }\n 30% {\n opacity: 0;\n }\n 50% {\n opacity: 0.3;\n transform: translateZ(10px) translateX(-2px);\n clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%);\n }\n 55% {\n opacity: 0;\n }\n 100% {\n opacity: 0.2;\n transform: translateZ(10px) translateX(2px);\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n }\n}\n\n@keyframes border-glitch {\n 0% {\n opacity: 0.6;\n filter: blur(1px) brightness(1);\n }\n 20% {\n opacity: 0.3;\n filter: blur(1.5px) brightness(0.8);\n }\n 25% {\n opacity: 0.8;\n filter: blur(1px) brightness(1.2);\n }\n 30% {\n opacity: 0.2;\n }\n 50% {\n opacity: 0.7;\n filter: blur(1px) brightness(1.1);\n }\n 100% {\n opacity: 0.6;\n filter: blur(1px) brightness(1);\n }\n}\n\n@keyframes data-flow {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 0 50%;\n }\n}\n"}

rude-mole-3

👁 实时预览

📝 源代码