搜索到
1
篇与
的结果
-
一个让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>{cloud title="404页面源码" type="lz" url="https://xuny.lanzouu.com/i5Yiv341qqri" password=""/}
