一个让AI写的404页面

突发奇想让AI给我写一个404页面，给它描述一下大概样式，写出来基本上是一样的，细节方面也可以修改，第一次这么直观的体验到AI的强大，别人可能要花费一个小时的事情它不到一分钟就完成了。

分享一下写出来的页面代码吧，新建一个404.html文件把代码复制进去就可以了，压缩包我也放到了下面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>404 Not Found - 恂云Blog</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    /* 核心毛玻璃效果 */
    .glass {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
    }
    /* 文字阴影增强 */
    .text-shadow {
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    /* 漂浮装饰动画 */
    .animate-float {
      animation: float 8s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-30px); }
    }
    /* 渐变背景动画 */
    .bg-animated {
      background: linear-gradient(130deg, #4f46e5, #7c3aed, #8b5cf6, #a855f7);
      background-size: 400% 400%;
      animation: gradientShift 18s ease infinite;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  </style>
</head>

<body class="font-sans bg-animated min-h-screen flex flex-col items-center justify-center p-4 overflow-x-hidden">
  <!-- 漂浮装饰元素-->
  <div class="absolute top-[10%] left-[5%] w-[180px] h-[180px] sm:w-[240px] sm:h-[240px] md:w-[300px] md:h-[300px] rounded-full bg-primary/20 blur-3xl animate-float"></div>
  <div class="absolute bottom-[15%] right-[8%] w-[200px] h-[200px] sm:w-[260px] sm:h-[260px] md:w-[320px] md:h-[320px] rounded-full bg-secondary/20 blur-3xl animate-float" style="animation-delay: 1.5s;"></div>
  
  <!-- 毛玻璃主容器-->
  <div class="glass rounded-2xl p-6 sm:p-8 md:p-10 max-w-md sm:max-w-lg md:max-w-xl w-full mx-auto relative z-10 transition-all duration-300 hover:shadow-xl">
    <div class="text-center">
      <!-- 404数字动效-->
      <div class="text-[6rem] sm:text-[8rem] md:text-[12rem] font-bold text-white text-shadow mb-2 relative">
        <span class="inline-block transform hover:scale-110 transition-transform duration-300">4</span>
        <span class="inline-block animate-pulse hover:rotate-12 transition-transform duration-300">0</span>
        <span class="inline-block transform hover:scale-110 transition-transform duration-300">4</span>
      </div>
      
      <!-- 标题与描述 -->
      <h1 class="text-[clamp(1.3rem,5vw,2.2rem)] font-bold text-white mb-4">页面不见了</h1>
      <p class="text-gray-100 text-[clamp(0.9rem,3vw,1.1rem)] mb-8 leading-relaxed px-2 sm:px-6">
        很抱歉，您访问的页面可能已被删除、移动或输入了错误的地址。
      </p>
      
      <!-- 纯文字按钮 -->
      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
        <a href="/" class="bg-white text-primary hover:bg-gray-50 font-medium py-3 px-6 sm:px-8 rounded-full transition-all duration-300 shadow-md hover:shadow-lg text-sm sm:text-base">
          返回首页
        </a>
        <a href="javascript:history.back()" class="bg-transparent border-2 border-white text-white hover:bg-white/10 font-medium py-3 px-6 sm:px-8 rounded-full transition-all duration-300 text-sm sm:text-base">
          返回上一页
        </a>
      </div>
    </div>
  </div>
  
  <!-- 页脚 -->
  <footer class="absolute bottom-4 left-0 right-0 text-center text-white/60 text-xs sm:text-sm px-4">
    © 2025 恂云Blog | 错误代码: 404
  </footer>
</body>
</html>

评论 (0)