首页牛逼的404页面代码

牛逼的404页面代码

时间: 2023-08-09 20:05:16 浏览: 111

以下是一个比较牛逼的404页面的示例代码，供您参考： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>404 - Page Not Found</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { max-width: 1200px; margin: 0 auto; text-align: center; padding-top: 100px; height: 100vh; } h1 { font-size: 120px; color: #333; margin: 0; animation: glitch 2s infinite; } p { font-size: 24px; color: #777; margin-top: 50px; } .btn { display: inline-block; padding: 10px 20px; border-radius: 5px; border: none; font-size: 16px; background-color: #333; color: #fff; cursor: pointer; margin-top: 50px; animation: pulse 2s infinite; } .btn:hover { background-color: #777; } @keyframes glitch { 0% { transform: translate(0, 0); text-shadow: 0 0 0 #fff, 0 0 10px #00fff1; color: #333; } 25% { transform: translate(-5px, 5px); text-shadow: 0 0 0 #fff, 0 0 20px #00fff1; color: #ff00ff; } 50% { transform: translate(5px, -5px); text-shadow: 0 0 0 #fff, 0 0 30px #00fff1; color: #00ff00; } 75% { transform: translate(-5px, 5px); text-shadow: 0 0 0 #fff, 0 0 40px #00fff1; color: #ff00ff; } 100% { transform: translate(0, 0); text-shadow: 0 0 0 #fff, 0 0 50px #00fff1; color: #333; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </head> <body> <div class="container"> <h1>404</h1> <p>Oops! Page not found.</p> <a href="#" class="btn">Back to Home</a> </div> </body> </html> ``` 这个页面使用了glitch和pulse动画效果，让页面看起来非常生动和有趣。同时，页面中还提供了一个“返回首页”的链接，方便用户寻找到他们需要的信息。您可以根据需要进行修改和调整，实现您自己的牛逼404页面。

阅读全文