{"html":"

\n \n

\n","css":".wireframe-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: -1;\n}\n\n.wireframe-line {\n position: absolute;\n background: linear-gradient(to right, transparent, #4b0082, transparent);\n height: 1px;\n width: 100%;\n animation: wireframe-shift 4s infinite ease-in-out;\n}\n\n.wireframe-line:nth-child(1) {\n top: 10%;\n}\n.wireframe-line:nth-child(2) {\n top: 30%;\n animation-delay: -1s;\n}\n.wireframe-line:nth-child(3) {\n top: 50%;\n animation-delay: -2s;\n}\n.wireframe-line:nth-child(4) {\n top: 70%;\n animation-delay: -3s;\n}\n.wireframe-line:nth-child(5) {\n top: 90%;\n animation-delay: -0.5s;\n}\n\n/* Button container */\n.button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n position: relative;\n z-index: 1;\n}\n\n/* Main button styles */\n.hacker-button {\n position: relative;\n width: 260px;\n height: 75px;\n font-size: 1.7em;\n font-family: \"Courier New\", monospace;\n color: #d8bfd8; /* Thistle for clarity */\n background: #04001b00; /* Dark indigo */\n border: 2px solid #d8bfd8;\n cursor: pointer;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 6px;\n transition:\n transform 0.2s ease,\n box-shadow 0.3s ease,\n background 0.3s ease,\n color 0.3s ease;\n z-index: 2;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);\n text-shadow:\n 0 0 6px #6a0dad,\n 0 0 12px #4b0082;\n}\n\n/* Cyber edges */\n.cyber-edges {\n position: absolute;\n top: -4px;\n left: -4px;\n width: calc(100% + 8px);\n height: calc(100% + 8px);\n background: transparent;\n border-top: 2px solid #6a0dad;\n border-bottom: 2px solid #6a0dad;\n clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);\n animation: edge-flicker 2s infinite;\n z-index: -1;\n}\n\n/* Data pulses */\n.data-pulses {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.data-pulse {\n position: absolute;\n width: 8px;\n height: 8px;\n background: #8a2be2;\n border-radius: 50%;\n opacity: 0;\n animation: pulse-travel 1.8s infinite;\n}\n\n.data-pulse:nth-child(1) {\n left: 10%;\n top: 50%;\n}\n.data-pulse:nth-child(2) {\n right: 10%;\n top: 50%;\n animation-delay: -0.6s;\n}\n.data-pulse:nth-child(3) {\n left: 30%;\n top: 20%;\n animation-delay: -1.2s;\n}\n.data-pulse:nth-child(4) {\n right: 30%;\n bottom: 20%;\n animation-delay: -1.8s;\n}\n\n/* Terminal scan */\n.terminal-scan {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.scan-line {\n position: absolute;\n width: 2px;\n height: 100%;\n background: #6a0dad;\n opacity: 0.5;\n animation: scan-sweep 2.5s infinite;\n}\n\n.scan-line:nth-child(1) {\n left: 0;\n}\n.scan-line:nth-child(2) {\n right: 0;\n animation-delay: -1.25s;\n animation-direction: reverse;\n}\n\n/* Encryption bits */\n.encryption-bits {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.encryption-bit {\n position: absolute;\n font-size: 0.7em;\n color: #d8bfd8;\n opacity: 0;\n animation: bit-flip 1.5s infinite;\n text-shadow: 0 0 4px #6a0dad;\n}\n\n.encryption-bit:nth-child(1) {\n top: 15%;\n left: 15%;\n content: \"1\";\n}\n.encryption-bit:nth-child(2) {\n top: 25%;\n right: 20%;\n content: \"0\";\n animation-delay: -0.3s;\n}\n.encryption-bit:nth-child(3) {\n bottom: 15%;\n left: 25%;\n content: \"1\";\n animation-delay: -0.6s;\n}\n.encryption-bit:nth-child(4) {\n bottom: 25%;\n right: 15%;\n content: \"0\";\n animation-delay: -0.9s;\n}\n.encryption-bit:nth-child(5) {\n top: 50%;\n left: 50%;\n content: \"X\";\n animation-delay: -1.2s;\n}\n\n/* Noise overlay */\n.noise-overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(106, 13, 173, 0.1),\n transparent,\n rgba(106, 13, 173, 0.1)\n );\n animation: noise-shift 1s infinite;\n z-index: 1;\n opacity: 0;\n}\n\n/* Hover effects */\n.hacker-button:hover {\n transform: scale(1.1) translateY(-5px);\n box-shadow:\n 0 0 70px #6a0dad,\n 0 0 140px rgba(106, 13, 173, 0.6),\n inset 0 0 35px rgba(106, 13, 173, 0.3);\n background: #2f2a5a;\n color: #ffffff;\n text-shadow:\n 0 0 10px #8a2be2,\n 0 0 20px #6a0dad;\n}\n\n.hacker-button:hover .cyber-edges {\n animation: edge-flicker 0.5s infinite;\n border-color: #8a2be2;\n}\n\n.hacker-button:hover .data-pulse {\n opacity: 0.7;\n animation: pulse-travel 0.8s infinite;\n}\n\n.hacker-button:hover .scan-line {\n animation: scan-sweep 1s infinite;\n opacity: 0.8;\n}\n\n.hacker-button:hover .encryption-bit {\n opacity: 0.9;\n animation: bit-flip 0.7s infinite;\n}\n\n.hacker-button:hover .noise-overlay {\n opacity: 0.4;\n animation: noise-shift 0.3s infinite;\n}\n\n/* Click effects */\n.hacker-button:active {\n transform: scale(0.95) translateY(2px);\n box-shadow: 0 0 30px #6a0dad;\n background: #3f3a7a;\n color: #d8bfd8;\n text-shadow: 0 0 15px #8a2be2;\n}\n\n.hacker-button:active .cyber-edges {\n border-color: #8a2be2;\n}\n\n/* Animations */\n@keyframes wireframe-shift {\n 0% {\n transform: translateX(-100%) skew(20deg);\n opacity: 0;\n }\n 50% {\n transform: translateX(0) skew(0deg);\n opacity: 0.5;\n }\n 100% {\n transform: translateX(100%) skew(-20deg);\n opacity: 0;\n }\n}\n\n@keyframes edge-flicker {\n 0%,\n 100% {\n opacity: 1;\n box-shadow: 0 0 10px rgba(106, 13, 173, 0.4);\n }\n 25% {\n opacity: 0.6;\n box-shadow: 0 0 5px rgba(106, 13, 173, 0.2);\n }\n 50% {\n opacity: 0.9;\n box-shadow: 0 0 15px rgba(106, 13, 173, 0.6);\n }\n 75% {\n opacity: 0.7;\n box-shadow: 0 0 8px rgba(106, 13, 173, 0.3);\n }\n}\n\n@keyframes pulse-travel {\n 0% {\n transform: scale(0) translateX(-50px);\n opacity: 0;\n }\n 50% {\n transform: scale(1) translateX(0);\n opacity: 0.7;\n }\n 100% {\n transform: scale(0) translateX(50px);\n opacity: 0;\n }\n}\n\n@keyframes scan-sweep {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n@keyframes bit-flip {\n 0% {\n transform: scale(0) rotate(0deg);\n opacity: 0;\n }\n 50% {\n transform: scale(1.2) rotate(180deg);\n opacity: 0.9;\n }\n 100% {\n transform: scale(0) rotate(360deg);\n opacity: 0;\n }\n}\n\n@keyframes noise-shift {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n"}

happy-catfish-70

👁 实时预览

📝 源代码