趣味 404 错误页 HTML 单页源码（外星人主题）

这是一款趣味风格的 404 错误页单页源码。深色径向渐变背景上，一个漂浮的外星人 emoji 配超大渐变「404」数字，下面一句轻松文案加两个按钮（返回首页 / 后退一步）。当用户踩到死链时，用它替代生硬报错，能显著降低跳出。

设计上用红到橙的渐变给数字上色，外星人用 CSS 动画做上下漂浮，按钮 hover 有投影，整体年轻俏皮又不失质感。整页用 flex 居中，移动端按钮自动竖排占满宽度。

单文件、零依赖。把文案换成你的品牌语气、把按钮链接指向你的首页或帮助中心即可。也是学习「全屏居中 + 关键帧动画」的轻量范例。注意：404 页通常需服务器配置错误文档指向它才生效。

使用教程

1. 下载与保存

复制代码保存为 404.html。

2. 本地预览

双击打开即可看到 404 页效果。

3. 自定义修改

换文案：改 h1 与 p。改主色：调 .num 的 linear-gradient 两个色值（背景在 body 的 radial-gradient）。改按钮：把 .primary / .ghost 的 href 指向你的首页/帮助页。换图标：把 .alien 的 emoji 换成你的形象。

4. 上线部署

上传后在服务器/托管平台把「自定义错误页」指向该 404.html（如 Vercel 的 vercel.json、Nginx 的 error_page）即生效。

HTML 源码

复制下方全部代码，保存为 .html 文件即可在浏览器中直接预览与使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面走丢了 · 404</title>
<style>
  :root{ --brand:#ef4444; --ink:#0f172a; --muted:#64748b; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%,#1e293b,#0f172a); color:#e2e8f0; line-height:1.7; }
  .c{ text-align:center; padding:30px; max-width:480px; }
  .num{ font-size:120px; font-weight:900; background:linear-gradient(135deg,#ef4444,#f59e0b); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
  h1{ font-size:26px; margin:6px 0 10px; color:#fff; }
  p{ color:#94a3b8; margin-bottom:26px; }
  .btns a{ display:inline-block; margin:0 8px; padding:12px 26px; border-radius:999px; font-weight:600; transition:.2s; }
  .primary{ background:#ef4444; color:#fff; }
  .primary:hover{ box-shadow:0 12px 30px rgba(239,68,68,.4); }
  .ghost{ border:1px solid #475569; color:#cbd5e1; }
  .ghost:hover{ border-color:#ef4444; color:#fff; }
  .alien{ font-size:54px; margin-bottom:6px; animation:float 3s ease-in-out infinite; }
  @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
  @media (max-width:480px){ .num{ font-size:88px; } .btns a{ display:block; margin:10px auto; width:80%; } }
</style>
</head>
<body>
  <div class="c">
    <div class="alien">🛸</div>
    <div class="num">404</div>
    <h1>哎呀，页面被外星人带走了</h1>
    <p>你访问的链接可能已删除、拼写有误，或从未存在过。别急，我们带你回安全的地方。</p>
    <div class="btns">
      <a class="primary" href="/">返回首页</a>
      <a class="ghost" href="javascript:history.back()">后退一步</a>
    </div>
  </div>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1735.html