AI摘要
制作一个有趣的动态404页面，包含两个山顶洞人打架动画，使用纯CSS实现，支持颜色和动画速度自定义，适用于所有现代浏览器。
🎭 动态404页面制作教程 - 会动的山顶洞人
💡 让404页面不再枯燥！ 今天教大家制作一个有趣的动态404页面，两个可爱的山顶洞人在打架，绝对让你的访客眼前一亮！
🎯 效果预览
🎬 动画特色：两个山顶洞人手持棍棒互相"攻击"，配有404大数字背景，生动有趣
🚀 快速开始
📁 文件结构
404页面/
├── index.html # 主页面文件
└── style.css # 样式文件⚡ 使用方法
- 创建
index.html文件，复制下方HTML代码 - 创建
style.css文件，复制下方CSS代码 - 将两个文件放在同一目录下
- 通过浏览器打开
index.html即可查看效果
📝 完整代码
🏗️ HTML结构
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - 页面不存在</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 404大数字 -->
<div class="text"><p>404</p></div>
<!-- 动画容器 -->
<div class="container">
<!-- 第一个山顶洞人 -->
<div class="caveman">
<div class="leg">
<div class="foot">
<div class="fingers"></div>
</div>
</div>
<div class="leg">
<div class="foot">
<div class="fingers"></div>
</div>
</div>
<div class="shape">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="head">
<div class="eye">
<div class="nose"></div>
</div>
<div class="mouth"></div>
</div>
<div class="arm-right">
<div class="club"></div>
</div>
</div>
<!-- 第二个山顶洞人 -->
<div class="caveman">
<div class="leg">
<div class="foot">
<div class="fingers"></div>
</div>
</div>
<div class="leg">
<div class="foot">
<div class="fingers"></div>
</div>
</div>
<div class="shape">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="head">
<div class="eye">
<div class="nose"></div>
</div>
<div class="mouth"></div>
</div>
<div class="arm-right">
<div class="club"></div>
</div>
</div>
</div>
</body>
</html>🎨 CSS样式详解
🌈 基础样式设置
/* 重置基础样式 */
body {
background-color: #FF7F2E; /* 温暖的橙色背景 */
font-family: "Concert One", cursive;
margin: 0;
overflow: hidden; /* 隐藏滚动条 */
padding: 0;
}🔢 404数字样式
.text {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
color: rgba(19, 36, 44, 0.1);
font-size: 30em;
text-align: center;
}🎭 动画容器
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 300px;
width: 500px;
}
/* 地面阴影效果 */
.container:after {
content: "";
position: absolute;
background-color: rgba(19, 36, 44, 0.1);
border-radius: 12px;
bottom: 40px;
left: 80px;
width: 350px;
height: 12px;
z-index: -1;
}👤 山顶洞人结构
| 部位 | 颜色代码 | 功能说明 |
|---|---|---|
| 头部 | #13242C | 深灰色头部 |
| 身体 | #D13433 | 红色身体 |
| 皮肤 | #EAB08C | 浅棕色皮肤 |
| 阴影 | #B2524D | 深红色阴影 |
⚡ 动画效果解析
🔄 手臂旋转动画
@keyframes arm-anima {
0% { transform: rotate(0); }
100% { transform: rotate(-360deg); }
}
.caveman:nth-child(1) .arm-right {
animation: arm-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
}
.caveman:nth-child(2) .arm-right {
animation: arm-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34);
animation-delay: 0.6s; /* 错开动画时间 */
}👀 眨眼动画
@keyframes eye-anima {
0%, 42% { height: 5px; }
45% { height: 1px; } /* 眨眼效果 */
100% { height: 5px; }
}👤 头部上下动画
@keyframes head-anima {
0%, 42% { top: 25px; }
45% { top: 50px; } /* 上下点头 */
100% { top: 25px; }
}🎯 个性化定制
🎨 颜色修改
你可以通过修改CSS变量来自定义颜色：
| 元素 | 默认颜色 | 可替换颜色 |
|---|---|---|
| 背景色 | #FF7F2E | #3498db, #2ecc71 |
| 人物1 | #D13433 | #e74c3c, #9b59b6 |
| 人物2 | #932422 | #c0392b, #8e44ad |
🕐 动画速度调整
修改动画持续时间：
.caveman:nth-child(1) .arm-right {
animation-duration: 2s; /* 改为2秒 */
}📱 响应式适配
虽然这个动画主要是桌面端效果，但你可以添加媒体查询：
@media (max-width: 768px) {
.text {
font-size: 15em; /* 移动端缩小404数字 */
}
.container {
transform: translate(-50%, -50%) scale(0.7);
}
}🚀 进阶玩法
🎵 添加音效
// 添加击打音效
const audio = new Audio('hit.mp3');
audio.loop = true;
audio.play();🖱️ 交互效果
// 鼠标悬停暂停动画
document.querySelector('.container').addEventListener('mouseenter', function() {
document.querySelectorAll('.caveman').forEach(el => {
el.style.animationPlayState = 'paused';
});
});✅ 部署指南
🌐 Web服务器配置
Nginx配置：将404错误指向此页面
error_page 404 /404.html; location = /404.html { root /var/www/html; }Apache配置：
ErrorDocument 404 /404.htmlNode.js Express：
app.use((req, res) => { res.status(404).sendFile(path.join(__dirname, '404.html')); });
📋 测试清单
- [ ] 页面在不同浏览器正常显示
- [ ] 动画流畅无卡顿
- [ ] 404数字清晰可见
- [ ] 响应式适配正常
- [ ] 部署后404跳转正确
🎉 总结
这个动态404页面不仅有趣，还展现了CSS动画的强大能力：
- ✅ 零JS依赖：纯CSS实现复杂动画
- ✅ 轻量级：文件体积小，加载快速
- ✅ 可定制：颜色、速度、大小都可调
- ✅ 跨平台：所有现代浏览器支持
让你的404页面成为访客的小惊喜吧！
灵感来源：CodePen创意作品 | 转载请注明出处
