用CSS @keyframes实现404文字入场动画需将“404”拆为三个独立span，通过opacity:0和transform:translateY(20px)设初始态，配合animation-delay错开触发（如0.2s/0.3s/0.4s），并指定forwards保持终态；同时适配响应式与prefers-reduced-motion兜底。
用 CSS @keyframes 实现 404 文字入场动画
纯 HTML + CSS 就能做出轻量、可复用的 404 动画，关键不是加 JS，而是控制 @keyframes 的触发时机和层级。文字“404”建议拆成三个独立 <span>，方便逐个错位入场。
常见错误是直接给 h1 加 animation，结果页面加载时闪一下再动——这是因为浏览器渲染顺序导致动画在 DOM 就绪前已开始。正确做法是加一个初始 opacity: 0 和 transform: translateY(20px)，再用 animation-delay 错开每个数字：
span:nth-child(1) { animation: popIn 0.6s 0.2s forwards; }
span:nth-child(2) { animation: popIn 0.6s 0.3s forwards; }
span:nth-child(3) { animation: popIn 0.6s 0.4s forwards; }
注意 forwards 必须写，否则动画结束后元素会回退到原始状态。
让背景粒子或线条动起来但不卡顿
用 canvas 手写粒子效果容易掉帧，尤其在低端设备上。更稳妥的方式是用 CSS background 配合 radial-gradient 和 animation 做渐变位移动画，或者用 SVG <path> + stroke-dasharray 模拟流动线条。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 避免在
@keyframes中频繁修改background-position，改用transform: translate()更高效 - 粒子数量别超 30 个，用
will-change: transform提前提示浏览器优化 - 如果用 SVG，把
<g>包裹的路径设为opacity: 0.15，动画时只调opacity或stroke-opacity，比改颜色或位置更省资源
响应式断点下动画要保持可读性
小屏设备上，“404”文字若还按桌面端尺寸缩放，可能糊成一团。动画本身没问题，但字体大小、transform 幅度、延迟时间都得随视口调整。
关键参数要重置：
- 在
@media (max-width: 480px)里把font-size设为clamp(2rem, 8vw, 4rem)，避免固定值 - 动画时长缩短到
0.4s，延迟统一为0.1s，防止用户等太久 - 禁用部分装饰动画（比如背景粒子），用
prefers-reduced-motion: reduce媒体查询兜底
否则用户开启系统“减少运动”后，页面可能突然静止且布局错位——因为没设 animation: none 回退规则。
部署时注意 404 页面的资源加载路径
很多人本地测试正常，上线后动画不动、图标不显示，根本原因是相对路径失效。404 页面被服务器返回时，URL 是 /some/missing/path，但 HTML 里写的 ./style.css 会被解析成 /some/missing/style.css，404。
必须统一用绝对路径：
- CSS 引入写成
<link rel="stylesheet" href="/css/404.css"> - SVG 内联，别用
<img src="icon.svg"> - 如果用了 Web Font，确保
@font-face的src也是以/开头
这个坑没法靠 DevTools 看出来，只有在真实 404 场景下才会暴露——比如访问一个不存在的子目录页，然后检查 Network 面板里有没有一堆 404 的资源请求。
