{"html":"\n","css":".hacker-button {\n position: relative;\n padding: 15px 30px;\n font-family: \"Courier New\", monospace;\n font-size: 20px;\n text-transform: uppercase;\n color: #ffcc00; /* Cheetah gold */\n background: #000;\n border: 2px solid #ffcc00;\n border-radius: 5px;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.3s ease;\n z-index: 1;\n}\n\n/* Scan effect with cheetah speed */\n.hacker-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 120deg,\n transparent,\n rgba(255, 204, 0, 0.3),\n transparent\n );\n animation: scan 2s linear infinite; /* Faster for cheetah theme */\n}\n\n/* Cheetah spots background */\n.hacker-button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n rgba(255, 204, 0, 0.2) 10%,\n transparent 11%\n ),\n radial-gradient(\n circle at 70% 30%,\n rgba(255, 204, 0, 0.15) 8%,\n transparent 9%\n ),\n radial-gradient(\n circle at 20% 80%,\n rgba(255, 204, 0, 0.25) 7%,\n transparent 8%\n );\n background-size:\n 20px 20px,\n 25px 25px,\n 15px 15px;\n opacity: 0;\n transition: opacity 0.3s ease;\n animation: spot-shift 3s infinite ease-in-out;\n}\n\n/* Pulse overlay */\n.hacker-button .overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at center,\n rgba(255, 204, 0, 0.1) 0%,\n transparent 70%\n );\n opacity: 0;\n z-index: -1;\n animation: pulse 3s infinite ease-in-out;\n}\n\n/* Simulated particle effects (cheetah dust) */\n.particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 0;\n}\n\n.particle {\n position: absolute;\n width: 5px;\n height: 5px;\n background: #ffcc00;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.particle-1 {\n top: 15%;\n left: 25%;\n animation: particle-move-1 1.8s infinite;\n}\n.particle-2 {\n top: 35%;\n left: 65%;\n animation: particle-move-2 2.2s infinite;\n}\n.particle-3 {\n top: 55%;\n left: 45%;\n animation: particle-move-3 1.6s infinite;\n}\n.particle-4 {\n top: 75%;\n left: 15%;\n animation: particle-move-4 2s infinite;\n}\n.particle-5 {\n top: 25%;\n left: 85%;\n animation: particle-move-5 2.1s infinite;\n}\n\n.click-particle {\n position: absolute;\n width: 7px;\n height: 7px;\n background: #ffcc00;\n border-radius: 50%;\n opacity: 0;\n z-index: 2;\n}\n\n.click-1 {\n top: 50%;\n left: 50%;\n animation: click-sparkle-1 0.5s ease-out;\n}\n.click-2 {\n top: 40%;\n left: 60%;\n animation: click-sparkle-2 0.5s ease-out;\n}\n.click-3 {\n top: 60%;\n left: 40%;\n animation: click-sparkle-3 0.5s ease-out;\n}\n.click-4 {\n top: 30%;\n left: 50%;\n animation: click-sparkle-4 0.5s ease-out;\n}\n\n/* Hover effects */\n.hacker-button:hover {\n box-shadow:\n 0 0 20px #ffcc00,\n 0 0 40px #ffcc00,\n inset 0 0 10px #ffcc00;\n transform: translateY(-5px) scale(1.05);\n color: #fff;\n animation: pounce 0.2s infinite;\n}\n\n.hacker-button:hover::after,\n.hacker-button:hover .overlay {\n opacity: 1;\n}\n\n.hacker-button:hover .particle {\n opacity: 0.8;\n}\n\n/* Active effects */\n.hacker-button:active {\n transform: scale(0.95);\n box-shadow: 0 0 10px #ffcc00;\n animation: none;\n}\n\n.hacker-button:active .click-particle {\n opacity: 1;\n}\n\n/* Text effects */\n.hacker-button span {\n position: relative;\n display: inline-block;\n transition: transform 0.1s;\n}\n\n.hacker-button:hover span {\n animation:\n glitch-text 0.3s linear infinite,\n claw-scratch 1s infinite;\n}\n\n/* Border animation */\n.hacker-button .border-anim {\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border: 2px dashed #ffcc00;\n opacity: 0.6;\n animation: border-leap 2s infinite linear;\n}\n\n/* Animations */\n@keyframes scan {\n 0% {\n transform: translateX(-100%) skewX(15deg);\n }\n 100% {\n transform: translateX(200%) skewX(-15deg);\n }\n}\n\n@keyframes glitch-text {\n 0% {\n transform: translate(0);\n }\n 20% {\n transform: translate(-3px, 2px);\n }\n 40% {\n transform: translate(-2px, -3px);\n }\n 60% {\n transform: translate(3px, 1px);\n }\n 80% {\n transform: translate(2px, -2px);\n }\n 100% {\n transform: translate(0);\n }\n}\n\n@keyframes spot-shift {\n 0% {\n transform: translate(0, 0);\n }\n 50% {\n transform: translate(5px, -5px);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.9);\n opacity: 0;\n }\n 50% {\n transform: scale(1.3);\n opacity: 0.4;\n }\n 100% {\n transform: scale(0.9);\n opacity: 0;\n }\n}\n\n@keyframes pounce {\n 0% {\n transform: translateY(-5px) scale(1.05);\n }\n 50% {\n transform: translateY(-7px) scale(1.06);\n }\n 100% {\n transform: translateY(-5px) scale(1.05);\n }\n}\n\n@keyframes claw-scratch {\n 0% {\n opacity: 1;\n }\n 15% {\n opacity: 0.8;\n transform: skewX(5deg);\n }\n 30% {\n opacity: 1;\n transform: skewX(-5deg);\n }\n 45% {\n opacity: 0.7;\n }\n 60% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes border-leap {\n 0% {\n transform: scale(1) translateX(10%);\n }\n 40% {\n transform: scale(1) translateX(20%);\n }\n 60% {\n transform: scale(1) translateX(35%);\n }\n 100% {\n transform: scale(1) translateX(100%);\n }\n}\n\n@keyframes particle-move-1 {\n 0% {\n transform: translate(0, 0);\n opacity: 0.8;\n }\n 50% {\n transform: translate(12px, -8px);\n opacity: 0.4;\n }\n 100% {\n transform: translate(-6px, 4px);\n opacity: 0.8;\n }\n}\n\n@keyframes particle-move-2 {\n 0% {\n transform: translate(0, 0);\n opacity: 0.8;\n }\n 50% {\n transform: translate(-10px, 6px);\n opacity: 0.5;\n }\n 100% {\n transform: translate(5px, -12px);\n opacity: 0.8;\n }\n}\n\n@keyframes particle-move-3 {\n 0% {\n transform: translate(0, 0);\n opacity: 0.8;\n }\n 50% {\n transform: translate(7px, 10px);\n opacity: 0.6;\n }\n 100% {\n transform: translate(-7px, -5px);\n opacity: 0.8;\n }\n}\n\n@keyframes particle-move-4 {\n 0% {\n transform: translate(0, 0);\n opacity: 0.8;\n }\n 50% {\n transform: translate(-12px, -10px);\n opacity: 0.4;\n }\n 100% {\n transform: translate(6px, 8px);\n opacity: 0.8;\n }\n}\n\n@keyframes particle-move-5 {\n 0% {\n transform: translate(0, 0);\n opacity: 0.8;\n }\n 50% {\n transform: translate(10px, -7px);\n opacity: 0.5;\n }\n 100% {\n transform: translate(-5px, 6px);\n opacity: 0.8;\n }\n}\n\n@keyframes click-sparkle-1 {\n 0% {\n transform: translate(0, 0);\n opacity: 1;\n }\n 100% {\n transform: translate(25px, -25px);\n opacity: 0;\n }\n}\n\n@keyframes click-sparkle-2 {\n 0% {\n transform: translate(0, 0);\n opacity: 1;\n }\n 100% {\n transform: translate(-20px, -20px);\n opacity: 0;\n }\n}\n\n@keyframes click-sparkle-3 {\n 0% {\n transform: translate(0, 0);\n opacity: 1;\n }\n 100% {\n transform: translate(15px, 30px);\n opacity: 0;\n }\n}\n\n@keyframes click-sparkle-4 {\n 0% {\n transform: translate(0, 0);\n opacity: 1;\n }\n 100% {\n transform: translate(-15px, -25px);\n opacity: 0;\n }\n}\n"}

fuzzy-catfish-28

👁 实时预览

📝 源代码