这个404页面包含以下特点：
响应式设计：
自动适应手机、平板和电脑屏幕、 使用媒体查询优化不同设备的显示效果、 弹性布局和相对单位保证可扩展性
视觉设计：
柔和的背景渐变、 半透明的白色内容卡片、 微妙的阴影和深度效果、 装饰性的SVG图形、 生动的404数字动画、添加倒计时显示区域、 使用红色突出显示剩余秒数、 自动更新倒计时数字、
交互功能：
按钮悬停动画、 点击反馈效果、 自动颜色变化（可选）、 流畅的过渡动画、 使用独立的倒计时ID便于控制、 通过DOM操作实时更新显示、 事件监听器确保操作安全性、
用户体验优化：
清晰的错误信息提示、 显眼的返回首页按钮、 友好的文案语气、 良好的可读性对比、数字倒计时增强时间感知、主动操作时取消、自动跳转避免冲突
技术特性：
CSS3动画和过渡、 Flexbox布局、 SVG矢量图形、 渐变色背景、 移动优先原则
跳转逻辑：
3秒倒计时结束后自动跳转、 、 点击按钮立即跳转并停止倒计时 点击按钮时显示"正在立即跳转..."提示、
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面未找到</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 页面容器 */
.container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* 内容区域 */
.content {
text-align: center;
max-width: 800px;
padding: 40px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
/* 404数字动画 */
.error-code {
font-size: 150px;
font-weight: 900;
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
}
/* 错误信息样式 */
.error-message {
font-size: 24px;
color: #34495e;
margin-bottom: 30px;
line-height: 1.6;
}
/* 返回按钮 */
.home-btn {
display: inline-block;
padding: 15px 40px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.home-btn:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
.home-btn:active {
transform: translateY(0);
}
/* 装饰元素 */
.decoration {
position: absolute;
opacity: 0.1;
}
/* 新增倒计时样式 */
.countdown {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 16px;
}
.countdown-number {
color: #e74c3c;
font-weight: bold;
}
/* 响应式设计 */
@media (max-width: 768px) {
.error-code {
font-size: 100px;
}
.error-message {
font-size: 20px;
}
.content {
margin: 20px;
padding: 30px;
}
}
@media (max-width: 480px) {
.error-code {
font-size: 80px;
}
.error-message {
font-size: 18px;
}
}
/* 动画定义 */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="error-code">404</div>
<h1 class="error-message">
哎呀！页面好像迷路了...
</h1>
<p style="margin-bottom: 25px; color: #7f8c8d;">
您访问的页面可能已被移动、删除或暂时不可用<br>
请检查网址是否正确，或返回主页继续使用工具
</p>
<!-- 新增倒计时提示 -->
<div class="countdown" id="countdown">
将在 <span class="countdown-number">3</span> 秒后自动返回首页
</div>
<a href="/" class="home-btn">
← 返回首页
</a>
<!-- SVG装饰元素 -->
<svg class="decoration" style="top: -50px; left: -50px; width: 200px;" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#3498db" stroke-width="2" fill="none"/>
</svg>
<svg class="decoration" style="bottom: -30px; right: -30px; width: 150px;" viewBox="0 0 100 100">
<polygon points="50,5 95,95 5,95" stroke="#e74c3c" stroke-width="2" fill="none"/>
</svg>
</div>
</div>
<script>
// 自动跳转功能
let seconds = 3;
const countdownElement = document.getElementById('countdown');
const countdownNumber = countdownElement.querySelector('.countdown-number');
// 倒计时函数
const countdown = setInterval(() => {
seconds--;
countdownNumber.textContent = seconds;
if(seconds <= 0) {
clearInterval(countdown);
window.location.href = "/";
}
}, 1000);
// 当用户主动点击按钮时取消自动跳转
document.querySelector('.home-btn').addEventListener('click', function(e) {
clearInterval(countdown);
countdownElement.textContent = "正在立即跳转...";
});
// 添加简单的交互动画
document.querySelector('.home-btn').addEventListener('mouseover', function() {
this.style.transform = 'scale(1.05)';
});
document.querySelector('.home-btn').addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});
// 随机背景颜色变化（可选）
const colors = ['#3498db', '#e74c3c', '#2ecc71', '#9b59b6'];
setInterval(() => {
document.documentElement.style.setProperty(
'--main-color',
colors[Math.floor(Math.random() * colors.length)]
);
}, 10000);
</script>
</body>
</html>显示效果：
