{"html":"

\n \n

\n SYSTEM READY
\n Authorization required for neural interface activation. Security protocol\n enabled.\n

\n","css":".cyber-btn {\n position: relative;\n background: transparent;\n color: #00f3ff;\n border: none;\n padding: 8px 25px;\n font-family: \"Rajdhani\", sans-serif;\n font-weight: 700;\n font-size: 16px;\n letter-spacing: 2px;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.3s;\n text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);\n margin: 0px;\n}\n\n.cyber-btn:hover {\n text-shadow: 0 0 12px rgba(0, 243, 255, 0.8);\n letter-spacing: 3px;\n}\n\n.cyber-btn::before,\n.cyber-btn::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 1px;\n background: #00f3ff;\n box-shadow: 0 0 5px #00f3ff;\n transition: all 0.3s;\n}\n\n.cyber-btn::before {\n top: 0;\n left: 0;\n}\n\n.cyber-btn::after {\n bottom: 0;\n right: 0;\n}\n\n.cyber-btn:hover::before,\n.cyber-btn:hover::after {\n width: 100%;\n}\n\n.cyber-tooltip {\n position: absolute;\n width: 220px;\n padding: 20px;\n background: rgba(15, 15, 35, 0.95);\n border: 1px solid rgba(0, 231, 255, 0.5);\n color: #00e7ff;\n font-size: 14px;\n line-height: 1.5;\n visibility: hidden;\n opacity: 0;\n transition: all 0.4s;\n box-shadow: 0 0 30px rgba(0, 231, 255, 0.2);\n text-shadow: 0 0 8px rgba(0, 231, 255, 0.5);\n z-index: 10;\n\n clip-path: polygon(\n 0% 20%,\n 10% 0%,\n 90% 0%,\n 100% 20%,\n 100% 80%,\n 90% 100%,\n 10% 100%,\n 0% 80%\n );\n\n background-image: linear-gradient(rgba(0, 231, 255, 0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 231, 255, 0.1) 1px, transparent 1px);\n background-size: 20px 20px;\n\n bottom: calc(100% + 20px);\n left: 50%;\n transform: translateX(-50%);\n}\n\n.cyber-btn:hover + .cyber-tooltip {\n visibility: visible;\n opacity: 1;\n transform: translateX(-50%) translateY(-10px);\n}\n\n@keyframes scan {\n 0% {\n transform: translateY(-100%);\n opacity: 0;\n }\n 20%,\n 80% {\n opacity: 0.7;\n }\n 100% {\n transform: translateY(100%);\n opacity: 0;\n }\n}\n\n.cyber-tooltip::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #00e7ff, transparent);\n box-shadow: 0 0 10px #00e7ff;\n animation: scan 2s infinite;\n}\n\n.cyber-tooltip .corner-tl {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 10px;\n height: 10px;\n border: 1px solid #00e7ff;\n box-shadow: 0 0 5px #00e7ff;\n border-right: none;\n border-bottom: none;\n}\n\n.cyber-tooltip .corner-tr {\n position: absolute;\n top: 5px;\n right: 5px;\n width: 10px;\n height: 10px;\n border: 1px solid #00e7ff;\n box-shadow: 0 0 5px #00e7ff;\n border-left: none;\n border-bottom: none;\n}\n\n.cyber-tooltip .corner-bl {\n position: absolute;\n bottom: 5px;\n left: 5px;\n width: 10px;\n height: 10px;\n border: 1px solid #00e7ff;\n box-shadow: 0 0 5px #00e7ff;\n border-right: none;\n border-top: none;\n}\n\n.cyber-tooltip .corner-br {\n position: absolute;\n bottom: 5px;\n right: 5px;\n width: 10px;\n height: 10px;\n border: 1px solid #00e7ff;\n box-shadow: 0 0 5px #00e7ff;\n border-left: none;\n border-top: none;\n}\n"}

slippery-moth-15

👁 实时预览

📝 源代码