分享一个好看的404html页面

综合评论4,625,872字数 485阅读1分37秒

网站新建的时候都会有默认的404页面，但是感觉那个不好看于是就自己找了个并且修改了一下代码

复制代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>404</title>
  6. <style>
  7. html,body{height:100vh}
  8. html:before,html:after,body:before,body:after{content:&#x27;&#x27;;background:linear-gradient(#203075,#233581);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
  9. html:before,body:before{background:linear-gradient(#233581,#203075)}
  10. html{background:linear-gradient(#203075,#233581);overflow:hidden}
  11. html:before{height:105vmax;width:105vmax;z-index:-4}
  12. html:after{height:80vmax;width:80vmax;z-index:-3}
  13. body{display:flex;justify-content:center;align-items:center;color:#FFF;font-family:&#x27;Varela Round&#x27;,Sans-serif;text-shadow:0 30px 10px rgba(0,0,0,0.15)}
  14. body:before{height:60vmax;width:60vmax;z-index:-2}
  15. body:after{height:40vmax;width:40vmax;z-index:-1}
  16. .main{text-align:center;z-index:5}
  17. p{font-size:18px;margin-top:0}
  18. h1{font-size:145px;margin:0}
  19. .countdown{font-size:24px;margin-top:20px}
  20. .bubble{background:linear-gradient(#EC5DC1,#D61A6F);border-radius:50%;box-shadow:0 30px 15px rgba(0,0,0,0.15);position:absolute}
  21. .bubble:before,.bubble:after{content:&#x27;&#x27;;background:linear-gradient(#EC5DC1,#D61A6F);border-radius:50%;box-shadow:0 30px 15px rgba(0,0,0,0.15);position:absolute}
  22. .bubble:nth-child(1){top:15vh;left:15vw;height:22vmin;width:22vmin}
  23. .bubble:nth-child(1):before{width:13vmin;height:13vmin;bottom:-25vh;right:-10vmin}
  24. .bubble:nth-child(2){top:20vh;left:38vw;height:10vmin;width:10vmin}
  25. .bubble:nth-child(2):before{width:5vmin;height:5vmin;bottom:-10vh;left:-8vmin}
  26. .bubble:nth-child(3){top:12vh;right:30vw;height:13vmin;width:13vmin}
  27. .bubble:nth-child(3):before{width:3vmin;height:3vmin;bottom:-15vh;left:-18vmin;z-index:6}
  28. .bubble:nth-child(4){top:25vh;right:18vw;height:18vmin;width:18vmin}
  29. .bubble:nth-child(4):before{width:7vmin;height:7vmin;bottom:-10vmin;left:-15vmin}
  30. .bubble:nth-child(5){top:60vh;right:18vw;height:28vmin;width:28vmin}
  31. .bubble:nth-child(5):before{width:10vmin;height:10vmin;bottom:5vmin;left:-25vmin}
  32. </style>
  33. </head>
  34. <body>
  35. <div class="bubble"></div>
  36. <div class="bubble"></div>
  37. <div class="bubble"></div>
  38. <div class="bubble"></div>
  39. <div class="bubble"></div>
  40. <div class="main">
  41. <h1>404</h1>
  42. <h2>您访问的页面不存在</h2>
  43. <p class="countdown">页面将在 <span id="countdown">3</span> 秒后自动跳转到首页</p>
  44. </div>
  46. <script>
  47. // 倒计时3秒后跳转到首页
  48. let countdown = 3;
  49. let countdownElement = document.getElementById('countdown');
  50. let countdownInterval = setInterval(function() {
  51.   countdown--;
  52.   countdownElement.textContent = countdown;
  53.   if (countdown <= 0) {
  54.     clearInterval(countdownInterval);
  55.     window.location.replace("/");
  56.   }
  57. }, 1000); // 每秒更新一次
  58. </script>
  59. </body>
  60. </html>

 文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/576.html 文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/576.html

继续阅读
简单的 404 界面
简单的 404 界面 综合

简单的 404 界面

编写简单的 404 界面，也可以用来做 500 报错界面，还会飘东西，特别好，蛮漂亮的！<!DOCTYPE html> <html> <head> <meta...
4,781,1071 404
  • 本文由 admin 发表于2024年8月10日 17:40:03
  • 转载请务必保留本文链接：https://bbs.50-0.cn/576.html
  • 404
零基础做出能赚钱的牛逼公众号

加载中...

匿名

发表评论

匿名网友
确定