前言

需要一个长的不丑的干净的404和500页面,方便配置到项目中或tomcat/nginx中
最好是个单文件无依赖也不用加载图片,以保持稳定快速,防止连404也炸了

找了很多
最后相中了这个页面
https://www.undi.cn/404/404-galaxy-not-found/
于是在他的基础上再加入了一点点自己的想法

在线效果预览地址
404 找不到该页面
404.html
500 服务异常
500.html

折腾

404.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=0.5"/>
  6. <title>404 - 找不到页面</title>
  7. <link rel="icon" type="https://res.zzzmh.cn/blog/image/x-icon" href="/favicon.ico"/>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. body {
  13. margin: 0;
  14. font-size: 26px;
  15. user-select: none
  16. }
  17. .container {
  18. position: relative;
  19. display: flex;
  20. align-items: center;
  21. justify-content: center;
  22. height: 100vh;
  23. background: white;
  24. color: black;
  25. font-family: arial, sans-serif;
  26. overflow: hidden;
  27. }
  28. .content {
  29. position: relative;
  30. width: 650px;
  31. max-width: 100%;
  32. margin: 30px;
  33. background: white;
  34. padding: 50px 80px 80px;
  35. text-align: center;
  36. z-index: 99;
  37. box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
  38. opacity: 0;
  39. animation: apparition 0.5s 0.1s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
  40. }
  41. .content p {
  42. font-size: 1.3rem;
  43. margin-top: 0;
  44. margin-bottom: 2rem;
  45. letter-spacing: 0.1rem;
  46. color: #595959;
  47. }
  48. .content button {
  49. display: inline-block;
  50. margin-top: 2rem;
  51. padding: 0.8rem 1rem;
  52. border: 3px solid #595959;
  53. background: transparent;
  54. font-size: 1.11rem;
  55. color: #595959;
  56. text-decoration: none;
  57. cursor: pointer;
  58. font-weight: bolder;
  59. }
  60. .particle {
  61. position: absolute;
  62. display: block;
  63. pointer-events: none;
  64. }
  65. @keyframes apparition {
  66. from {
  67. opacity: 0;
  68. transform: translateY(-100px);
  69. }
  70. to {
  71. opacity: 1;
  72. transform: translateY(0);
  73. }
  74. }
  75. @keyframes float {
  76. 0%, 100% {
  77. transform: translateY(0);
  78. }
  79. 50% {
  80. transform: translateY(200px);
  81. }
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <main class="container">
  87. <article class="content">
  88. <h1>
  89. 404 找不到这个页面
  90. </h1>
  91. <p>
  92. 抱歉,您要访问的页面已不存在,可能已被删除,
  93. 建议返回首页,或者看看我的其他网站
  94. </p>
  95. <p>
  96. <a href="https://zzzmh.cn/index">
  97. <button>个人博客</button>
  98. </a>
  99. <a href="https://bz.zzzmh.cn/">
  100. <button>极简壁纸</button>
  101. </a>
  102. <a href="https://chrome.zzzmh.cn/">
  103. <button>极简插件</button>
  104. </a>
  105. <a href="https://tool.zzzmh.cn/">
  106. <button>极简工具</button>
  107. </a>
  108. </p>
  109. </article>
  110. </main>
  111. <script>
  112. // 给背景加点好玩的
  113. for (let i = 0; i < 150; i++) {
  114. const span = document.createElement('span');
  115. span.className = 'particle';
  116. span.style.top = random(0, 100) + '%';
  117. span.style.left = random(0, 100) + '%';
  118. span.style.fontSize = random(12, 42, true) + 'px';
  119. span.style.filter = 'blur(' + random(0.1, 2.6) + 'px)';
  120. span.style.animation = random(10, 60) + 's float infinite';
  121. span.innerHTML = String.fromCharCode(random(33, 126, true));
  122. span.style.color = 'rgb(' + random(0, 255, true) + ',' + random(0, 255, true) + ',' + random(0, 255, true) + ')';
  123. document.querySelector('.container').appendChild(span);
  124. }
  125. function random(min, max, isInteger) {
  126. const number = Math.random() * (max - min) + min;
  127. return isInteger ? Math.floor(number) : number;
  128. }
  129. </script>
  130. </body>
  131. </html>



500.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=0.5"/>
  6. <title>500 - 服务器繁忙</title>
  7. <link rel="icon" type="https://res.zzzmh.cn/blog/image/x-icon" href="/favicon.ico"/>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. body {
  13. margin: 0;
  14. font-size: 26px;
  15. user-select: none
  16. }
  17. .container {
  18. position: relative;
  19. display: flex;
  20. align-items: center;
  21. justify-content: center;
  22. height: 100vh;
  23. background: white;
  24. color: black;
  25. font-family: arial, sans-serif;
  26. overflow: hidden;
  27. }
  28. .content {
  29. position: relative;
  30. width: 650px;
  31. max-width: 100%;
  32. margin: 30px;
  33. background: white;
  34. padding: 50px 80px 80px;
  35. text-align: center;
  36. z-index: 99;
  37. box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
  38. opacity: 0;
  39. animation: apparition 0.5s 0.1s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
  40. }
  41. .content p {
  42. font-size: 1.3rem;
  43. margin-top: 0;
  44. margin-bottom: 2rem;
  45. letter-spacing: 0.1rem;
  46. color: #595959;
  47. }
  48. .content button {
  49. display: inline-block;
  50. margin-top: 2rem;
  51. padding: 0.8rem 1rem;
  52. border: 3px solid #595959;
  53. background: transparent;
  54. font-size: 1.11rem;
  55. color: #595959;
  56. text-decoration: none;
  57. cursor: pointer;
  58. font-weight: bolder;
  59. }
  60. .particle {
  61. position: absolute;
  62. display: block;
  63. pointer-events: none;
  64. }
  65. @keyframes apparition {
  66. from {
  67. opacity: 0;
  68. transform: translateY(-100px);
  69. }
  70. to {
  71. opacity: 1;
  72. transform: translateY(0);
  73. }
  74. }
  75. @keyframes float {
  76. 0%, 100% {
  77. transform: translateY(0);
  78. }
  79. 50% {
  80. transform: translateY(200px);
  81. }
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <main class="container">
  87. <article class="content">
  88. <h1>
  89. 500 服务器繁忙
  90. </h1>
  91. <p>
  92. 抱歉,当前时间服务器繁忙,可能正在维护中,请稍等片刻,
  93. 您也可以尝试访问我的其他网站,谢谢
  94. </p>
  95. <p>
  96. <a href="https://zzzmh.cn/index">
  97. <button>个人博客</button>
  98. </a>
  99. <a href="https://bz.zzzmh.cn/">
  100. <button>极简壁纸</button>
  101. </a>
  102. <a href="https://chrome.zzzmh.cn/">
  103. <button>极简插件</button>
  104. </a>
  105. <a href="https://tool.zzzmh.cn/">
  106. <button>极简工具</button>
  107. </a>
  108. </p>
  109. </article>
  110. </main>
  111. <script>
  112. // 给背景加点好玩的
  113. for (let i = 0; i < 150; i++) {
  114. const span = document.createElement('span');
  115. span.className = 'particle';
  116. span.style.top = random(0, 100) + '%';
  117. span.style.left = random(0, 100) + '%';
  118. span.style.fontSize = random(12, 42, true) + 'px';
  119. span.style.filter = 'blur(' + random(0.1, 2.6) + 'px)';
  120. span.style.animation = random(10, 60) + 's float infinite';
  121. span.innerHTML = String.fromCharCode(random(33, 126, true));
  122. span.style.color = 'rgb(' + random(0, 255, true) + ',' + random(0, 255, true) + ',' + random(0, 255, true) + ')';
  123. document.querySelector('.container').appendChild(span);
  124. }
  125. function random(min, max, isInteger) {
  126. const number = Math.random() * (max - min) + min;
  127. return isInteger ? Math.floor(number) : number;
  128. }
  129. </script>
  130. </body>
  131. </html>

END

代码非完全原创,大量参考以下地址

https://404.life/184.html

源码Gitee地址
https://gitee.com/tczmh/ErrorPage404