{"html":"

\n \n

\n","css":".grid-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 background: repeating-linear-gradient(\n 0deg,\n rgba(75, 0, 130, 0.15) 0px,\n rgba(75, 0, 130, 0.15) 1px,\n transparent 1px,\n transparent 15px\n ),\n repeating-linear-gradient(\n 90deg,\n rgba(75, 0, 130, 0.15) 0px,\n rgba(75, 0, 130, 0.15) 1px,\n transparent 1px,\n transparent 15px\n );\n}\n\n.grid-line {\n position: absolute;\n background: #6a0dad;\n opacity: 0.5;\n animation: grid-flow 2.5s linear infinite;\n}\n\n.grid-line:nth-child(odd) {\n width: 100%;\n height: 1px;\n}\n.grid-line:nth-child(even) {\n height: 100%;\n width: 1px;\n}\n.grid-line:nth-child(1) {\n top: 15%;\n}\n.grid-line:nth-child(2) {\n left: 25%;\n}\n.grid-line:nth-child(3) {\n top: 55%;\n animation-delay: -0.8s;\n}\n.grid-line:nth-child(4) {\n left: 65%;\n animation-delay: -1.6s;\n}\n.grid-line:nth-child(5) {\n top: 85%;\n animation-delay: -1.2s;\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: 280px;\n height: 90px;\n font-size: 1.6em;\n font-family: \"Courier New\", monospace;\n font-weight: bolder;\n color: #e6e6fa; /* Lavender for clear contrast */\n background: #2a1a4a; /* Dark indigo background */\n border: none;\n border-radius: 0;\n cursor: pointer;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 5px;\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(10% 0, 100% 0, 90% 100%, 0% 100%);\n text-shadow:\n 0 0 5px #6a0dad,\n 0 0 10px #4b0082; /* Neon glow for readability */\n}\n\n/* Neon frame */\n.neon-frame {\n position: absolute;\n top: -5px;\n left: -5px;\n width: calc(100% + 10px);\n height: calc(100% + 10px);\n border: 3px solid #6a0dad;\n clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);\n animation: neon-flicker 1.8s infinite;\n z-index: -1;\n box-shadow: 0 0 15px rgba(106, 13, 173, 0.5);\n}\n\n/* Circuit traces */\n.circuit-traces {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.circuit-trace {\n position: absolute;\n background: #8a2be2; /* Brighter indigo */\n opacity: 0.6;\n animation: circuit-flow 1.2s infinite ease-in-out;\n}\n\n.circuit-trace:nth-child(1) {\n width: 2px;\n height: 40%;\n top: 0;\n left: 15%;\n}\n.circuit-trace:nth-child(2) {\n width: 50%;\n height: 2px;\n top: 25%;\n right: 0;\n}\n.circuit-trace:nth-child(3) {\n width: 2px;\n height: 50%;\n bottom: 0;\n left: 40%;\n animation-delay: -0.4s;\n}\n.circuit-trace:nth-child(4) {\n width: 60%;\n height: 2px;\n bottom: 20%;\n left: 0;\n animation-delay: -0.8s;\n}\n.circuit-trace:nth-child(5) {\n width: 2px;\n height: 30%;\n top: 10%;\n right: 10%;\n animation-delay: -1s;\n}\n\n/* Code fragments */\n.code-fragments {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.code-fragment {\n position: absolute;\n font-size: 0.4em;\n color: #dbdbdb;\n opacity: 0.6;\n animation: code-drift 1.5s infinite;\n text-shadow: 0 0 5px #6a0dad;\n}\n\n.code-fragment:nth-child(1) {\n top: 5%;\n left: 10%;\n content: \"0x1A\";\n}\n.code-fragment:nth-child(2) {\n top: 20%;\n right: 15%;\n content: \"1100\";\n animation-delay: -0.3s;\n}\n.code-fragment:nth-child(3) {\n bottom: 10%;\n left: 20%;\n content: \"DATA\";\n animation-delay: -0.6s;\n}\n.code-fragment:nth-child(4) {\n bottom: 20%;\n right: 10%;\n content: \"CODE\";\n animation-delay: -0.9s;\n}\n.code-fragment:nth-child(5) {\n top: 50%;\n left: 50%;\n content: \"RUN\";\n animation-delay: -1.2s;\n}\n\n/* Interference waves */\n.interference {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n rgba(106, 13, 173, 0.25) 0%,\n transparent 60%\n );\n animation: interference-pulse 2s infinite;\n z-index: 1;\n opacity: 0;\n}\n\n/* Scan bars */\n.scan-bars {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.scan-bar {\n position: absolute;\n width: 100%;\n height: 5px;\n background: rgba(106, 13, 173, 0.4);\n animation: scan-bar 1.5s infinite ease-in-out;\n}\n\n.scan-bar:nth-child(1) {\n top: 0;\n}\n.scan-bar:nth-child(2) {\n bottom: 0;\n animation-delay: -0.75s;\n animation-direction: reverse;\n}\n.scan-bar:nth-child(3) {\n top: 50%;\n animation-delay: -0.5s;\n}\n\n/* Text glow */\n.text-glow {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n rgba(230, 230, 250, 0.2) 0%,\n transparent 70%\n );\n opacity: 0;\n animation: text-glow-pulse 2.5s infinite;\n z-index: -1;\n}\n\n/* Hover effects */\n.hacker-button:hover {\n transform: scale(1.12) skew(-4deg);\n box-shadow:\n 0 0 60px #6a0dad,\n 0 0 120px rgba(106, 13, 173, 0.7),\n inset 0 0 40px rgba(106, 13, 173, 0.4);\n background: #3a2a6a; /* Lighter dark indigo */\n color: #ececec; /* White for max clarity */\n text-shadow:\n 0 0 10px #6a0dad,\n 0 0 20px #4b0082;\n}\n\n.hacker-button:hover .neon-frame {\n animation: neon-flicker 0.4s infinite;\n border-color: #8a2be2;\n}\n\n.hacker-button:hover .circuit-trace {\n animation: circuit-flow 0.5s infinite ease-in-out;\n opacity: 0.9;\n}\n\n.hacker-button:hover .code-fragment {\n opacity: 0.8;\n animation: code-drift 0.8s infinite;\n}\n\n.hacker-button:hover .interference {\n opacity: 0.6;\n animation: interference-pulse 0.8s infinite;\n}\n\n.hacker-button:hover .scan-bar {\n animation: scan-bar 0.6s infinite ease-in-out;\n}\n\n.hacker-button:hover .text-glow {\n opacity: 0.5;\n animation: text-glow-pulse 1s infinite;\n}\n\n/* Click effects */\n.hacker-button:active {\n transform: scale(0.92) skew(4deg);\n box-shadow: 0 0 25px #6a0dad;\n background: #4a3a8a; /* Even lighter indigo */\n color: #e6e6fa;\n text-shadow: 0 0 15px #8a2be2;\n}\n\n.hacker-button:active .neon-frame {\n border-color: #8a2be2;\n}\n\n/* Animations */\n@keyframes grid-flow {\n 0% {\n transform: translateX(-100%) translateY(-100%);\n }\n 100% {\n transform: translateX(100%) translateY(100%);\n }\n}\n\n@keyframes neon-flicker {\n 0%,\n 100% {\n opacity: 1;\n box-shadow: 0 0 15px rgba(106, 13, 173, 0.5);\n }\n 20% {\n opacity: 0.7;\n box-shadow: 0 0 10px rgba(106, 13, 173, 0.3);\n }\n 40% {\n opacity: 0.9;\n box-shadow: 0 0 20px rgba(106, 13, 173, 0.6);\n }\n 60% {\n opacity: 0.6;\n box-shadow: 0 0 5px rgba(106, 13, 173, 0.2);\n }\n 80% {\n opacity: 0.95;\n box-shadow: 0 0 25px rgba(106, 13, 173, 0.7);\n }\n}\n\n@keyframes circuit-flow {\n 0% {\n transform: scale(0.5) translateX(-30%);\n }\n 50% {\n transform: scale(1) translateX(0);\n }\n 100% {\n transform: scale(0.5) translateX(30%);\n }\n}\n\n@keyframes code-drift {\n 0% {\n transform: translateY(100%) rotate(-5deg);\n opacity: 0;\n }\n 50% {\n transform: translateY(0) rotate(5deg);\n opacity: 0.8;\n }\n 100% {\n transform: translateY(-100%) rotate(-5deg);\n opacity: 0;\n }\n}\n\n@keyframes interference-pulse {\n 0%,\n 100% {\n transform: scale(0.9);\n opacity: 0;\n }\n 50% {\n transform: scale(1.3);\n opacity: 0.6;\n }\n}\n\n@keyframes scan-bar {\n 0% {\n transform: translateY(-100%);\n }\n 50% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n"}

wonderful-horse-46

👁 实时预览

📝 源代码