{"html":"\n","css":".cyber-button {\n position: relative;\n padding: 25px 50px;\n background: #000;\n border: none;\n cursor: pointer;\n overflow: hidden;\n font-family: \"Arial\", sans-serif;\n font-size: 1.5rem;\n font-weight: bold;\n letter-spacing: 4px;\n color: #0ff;\n text-transform: uppercase;\n box-shadow:\n 0 0 15px #0ff,\n inset 0 0 15px #0ff;\n text-shadow: 0 0 5px #0ff;\n transition: all 0.3s;\n}\n\n.cyber-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(0, 255, 255, 0.4),\n transparent\n );\n transition: 0.5s;\n}\n\n.cyber-button:hover::before {\n left: 100%;\n}\n\n.glitch {\n position: relative;\n}\n\n.glitch::before,\n.glitch::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0.8;\n}\n\n.glitch::before {\n animation: glitch-effect 3s infinite;\n color: #ff00ff;\n left: 2px;\n}\n\n.glitch::after {\n animation: glitch-effect 2s infinite;\n color: #00ffff;\n left: -2px;\n}\n\n@keyframes glitch-effect {\n 0% {\n transform: none;\n opacity: 0.8;\n }\n 7% {\n transform: translate(-2px, -3px);\n opacity: 0.6;\n }\n 10% {\n transform: translate(2px, 3px);\n opacity: 0.8;\n }\n 20% {\n transform: none;\n opacity: 0.8;\n }\n 27% {\n transform: translate(2px, 3px);\n opacity: 0.6;\n }\n 30% {\n transform: translate(-2px, -3px);\n opacity: 0.8;\n }\n 35% {\n transform: none;\n opacity: 0.8;\n }\n 100% {\n transform: none;\n opacity: 0.8;\n }\n}\n\n.cyberpunk-border {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid #0ff;\n clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);\n}\n\n.gradient-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 10px,\n rgba(0, 255, 255, 0.1) 10px,\n rgba(0, 255, 255, 0.1) 20px\n );\n}\n\n.scanline {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to bottom,\n transparent 50%,\n rgba(0, 255, 255, 0.2) 50%\n );\n background-size: 100% 4px;\n animation: scan 0.5s linear infinite;\n}\n\n@keyframes scan {\n 0% {\n background-position: 0 -1000px;\n }\n 100% {\n background-position: 0 1000px;\n }\n}\n\n.cyber-button:hover {\n transform: scale(1.05);\n box-shadow:\n 0 0 25px #0ff,\n inset 0 0 25px #0ff;\n}\n\n.cyber-button:active {\n transform: scale(0.95);\n}\n"}

strong-husky-49

👁 实时预览

📝 源代码