找到
1
篇与
🧑💻 代码
相关的结果
-
分享一个黑客风404的HTML 图片 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>404 Error | Access Denied</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet"> <!-- Tailwind 配置 --> <script> tailwind.config = { theme: { extend: { colors: { neon: '#39FF14', dark: '#0F172A', darker: '#020617', terminal: '#0D1117', }, fontFamily: { matrix: ['"Courier New"', 'monospace'], }, } } } </script> <!-- 自定义工具类 --> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .glow { text-shadow: 0 0 10px rgba(57, 255, 20, 0.7); } .matrix-code { background-image: linear-gradient(rgba(13, 17, 23, 0.9), rgba(13, 17, 23, 0.9)), url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2339FF14' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, transparent, rgba(57, 255, 20, 0.8), transparent); animation: scan 3s linear infinite; } @keyframes scan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } } .noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } .typewriter { overflow: hidden; white-space: nowrap; animation: typing 2s steps(40, end); } @keyframes typing { from { width: 0; } to { width: 100%; } } .blink { animation: blink 1s step-end infinite; } @keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } } } </style> </head> <body class="bg-darker text-neon font-matrix min-h-screen flex flex-col matrix-code overflow-hidden"> <!-- 噪点背景 --> <div class="noise"></div> <!-- 扫描线效果 --> <div class="scan-line"></div> <!-- 顶部导航栏 --> <header class="py-4 px-6 border-b border-neon/20 backdrop-blur-sm bg-darker/80"> <div class="flex justify-between items-center"> <div class="text-neon text-xl font-bold"> <i class="fa fa-shield mr-2"></i>SYSTEM PROTECTION </div> <div class="flex space-x-6"> <span class="text-neon/70">STATUS: SECURE</span> <span class="text-neon/70">TIME: <span id="current-time">00:00:00</span></span> <span class="text-neon/70">ID: <span id="session-id">XK-78239</span></span> </div> </div> </header> <!-- 主要内容 --> <main class="flex-grow p-8 md:p-16 overflow-hidden"> <div class="max-w-4xl mx-auto"> <!-- 404 错误信息 --> <div class="mb-12"> <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold mb-4 glow">404</h1> <p class="text-[clamp(1rem,3vw,1.5rem)] mb-8">ACCESS DENIED</p> <div class="bg-terminal/50 border border-neon/30 rounded-lg p-6 mb-8 shadow-lg shadow-neon/10"> <div class="flex items-center mb-4"> <span class="text-neon/70 mr-2">ERROR</span> <span class="text-neon">404</span> <span class="text-neon/70 ml-2">|</span> <span class="text-neon/70">RESOURCE NOT FOUND</span> </div> <p class="text-neon/80 mb-4">The requested resource could not be located on this system.</p> <div class="text-neon/60"> <p class="mb-1">Status Code: 404 Not Found</p> <p class="mb-1">Timestamp: <span id="error-timestamp">2023-05-12T14:30:45Z</span></p> <p class="mb-1">Request ID: <span id="request-id">3a4b5c6d-7e8f-9a0b-1c2d-3e4f5a6b7c8d</span></p> <p>Session Terminated: <span id="session-terminated">TRUE</span></p> </div> </div> </div> <!-- 模拟命令行 --> <div class="bg-terminal/80 border border-neon/30 rounded-lg p-4 mb-8 shadow-lg shadow-neon/10"> <div class="flex items-center mb-2"> <span class="text-neon">user@system</span> <span class="text-neon/50">:</span> <span class="text-neon/70">~$</span> <span class="ml-2 typewriter">ls -la</span> <span class="ml-1 blink">_</span> </div> <div class="text-neon/60 text-sm"> <p class="mb-1">total 0</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 .</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 ..</p> <p class="mb-1">lrwxrwxrwx 1 root root 7 Jan 1 00:00 bin -> usr/bin</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 boot</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 dev</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 etc</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 home</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 lib</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 media</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 mnt</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 opt</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 proc</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 root</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 run</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 sbin</p> <p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 srv</p> <p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 sys</p> <p class="mb-1">drwxrwxrwt 1 root root 4096 Jan 1 00:00 tmp</p> <p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 usr</p> <p>drwxr-xr-x 1 root root 4096 Jan 1 00:00 var</p> </div> </div> <!-- 按钮 --> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button id="back-btn" class="bg-neon/20 hover:bg-neon/30 text-neon border border-neon/50 px-6 py-3 rounded-md transition-all duration-300 flex items-center justify-center"> <i class="fa fa-arrow-left mr-2"></i> Return to Safety </button> <button id="retry-btn" class="bg-transparent hover:bg-neon/10 text-neon/80 border border-neon/30 px-6 py-3 rounded-md transition-all duration-300 flex items-center justify-center"> <i class="fa fa-refresh mr-2"></i> Retry Connection </button> </div> </div> </main> <!-- 底部信息 --> <footer class="py-4 px-6 border-t border-neon/20 text-neon/50 text-sm backdrop-blur-sm bg-darker/80"> <div class="flex flex-col md:flex-row justify-between items-center"> <div class="mb-2 md:mb-0"> <i class="fa fa-lock mr-2"></i>SYSTEM PROTECTION NETWORK </div> <div> <span>UNAUTHORIZED ACCESS ATTEMPTS WILL BE LOGGED AND REPORTED</span> </div> </div> </footer> <!-- 动画代码效果背景 --> <div id="matrix-code" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div> <script> // 更新当前时间 function updateTime() { const now = new Date(); const timeString = now.toLocaleTimeString(); document.getElementById('current-time').textContent = timeString; } // 生成随机ID function generateRandomId() { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; let result = ''; for (let i = 0; i < 8; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)); } return result; } // 生成随机请求ID function generateRequestId() { const parts = []; for (let i = 0; i < 5; i++) { const length = i === 0 ? 8 : i === 4 ? 12 : 4; let part = ''; for (let j = 0; j < length; j++) { part += Math.floor(Math.random() * 16).toString(16); } parts.push(part); } return parts.join('-'); } // 初始化页面 function initPage() { // 更新时间 updateTime(); setInterval(updateTime, 1000); // 更新会话ID document.getElementById('session-id').textContent = generateRandomId(); // 更新请求ID document.getElementById('request-id').textContent = generateRequestId(); // 更新时间戳 const now = new Date(); document.getElementById('error-timestamp').textContent = now.toISOString(); // 设置按钮点击事件 document.getElementById('back-btn').addEventListener('click', function() { // 模拟返回安全区域的动画 this.classList.add('animate-pulse'); setTimeout(() => { window.history.back(); }, 500); }); document.getElementById('retry-btn').addEventListener('click', function() { // 模拟重试连接的动画 this.classList.add('animate-spin'); setTimeout(() => { location.reload(); }, 1000); }); // 初始化矩阵代码背景 initMatrixCode(); } // 矩阵代码背景动画 function initMatrixCode() { const canvas = document.getElementById('matrix-code'); const ctx = canvas.getContext('2d'); // 设置画布大小 function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); // 字符集 const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+-=[]{}|;:,.<>?'; const fontSize = 16; const columns = Math.floor(canvas.width / fontSize); const drops = []; // 初始化下落位置 for (let i = 0; i < columns; i++) { drops[i] = Math.floor(Math.random() * canvas.height); } // 绘制函数 function draw() { // 半透明黑色背景，创造轨迹效果 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 设置文本样式 ctx.fillStyle = '#39FF14'; ctx.font = `${fontSize}px Courier New`; // 绘制每个字符 for (let i = 0; i < columns; i++) { const text = chars.charAt(Math.floor(Math.random() * chars.length)); ctx.fillText(text, i * fontSize, drops[i] * fontSize); // 随机重置位置 if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } // 开始动画 setInterval(draw, 33); } // 页面加载完成后初始化 window.addEventListener('DOMContentLoaded', initPage); </script> </body> </html>
