纯HTML无法实现微交互，必须配合CSS声明样式响应规则或JavaScript绑定事件；transition需写在常态规则中而非伪类里；移动端应使用:focus-within或JS切换状态；动效优先选用内联SVG和CSS动画，并匹配错误语境的缓入缓出节奏。
纯 HTML 无法实现微交互，必须配合 CSS 和 JavaScript —— 但你可以用极简方式达成，不引入框架、不写复杂逻辑，关键在结构设计和属性预留。
为什么
HTML 是标记语言，只定义内容结构和语义。像 :hover、transition、click 这类行为，浏览器不会主动执行，除非你用 CSS 声明样式响应规则，或用 JavaScript 绑定事件。一个只有 <h1>404</h1> 的 HTML 文件，无论加多少 class，只要没对应 CSS/JS，就只是静态文本。
常见误解是“把动画代码写进 HTML 就行”，实际必须：
- CSS 文件（或
<style></style>块）里写.error-emoji:hover { transform: rotate(12deg); } - HTML 中该元素得有 class：
<span class="error-emoji">⚠️</span> - 如果要点击后展开提示，还得加
<script></script>监听click并切换class
transition 必须写在常态规则里，不是 :hover 里
很多 404 页面动效卡顿或首次无动画，就是因为把 transition 错写在伪类中，比如：
立即学习“前端免费学习笔记（深入）”；
.cta-button:hover {
transform: scale(1.05);
transition: transform 0.2s ease; /* ❌ 错：第一次 hover 没过渡 */
}正确写法是提前声明可过渡属性：
.cta-button {
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cta-button:hover {
transform: scale(1.05);
}这样浏览器一加载就准备好合成层，悬停时直接走 GPU 动画路径。对 404 页面这种低频访问页，这点小优化能明显提升“被认真对待”的感知。
移动端无 :hover？用 :focus-within 或显式 JS 切换
手机用户点不到 hover，但 404 页面常需要“点一下显示返回首页按钮”或“展开错误说明”。别依赖 :hover 做核心功能：
- 给容器加
tabindex="0"，让它可聚焦：<div class="error-card" tabindex="0"> <li>用 <code>.error-card:focus-within .detail-toggle { opacity: 1; }触发显示 - 更稳妥的是加 JS：
document.querySelector('.detail-toggle').addEventListener('click', e => e.target.classList.toggle('open'))，再配 CSS 控制.detail-toggle.open { max-height: 200px; } - 用内联 SVG 替代 PNG/GIF：图标可直接写进 HTML，支持
fill和transform动画，无额外请求 - 涟漪、脉冲、错位抖动等效果，全用 CSS
@keyframes实现，比如animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; - 避免
background-image: url(...)加载外部资源；所有视觉元素尽量 inline 或 base64 编码
注意：不要用 display: none 切换，它会破坏动画；改用 opacity + max-height + overflow: hidden 组合，过渡更平滑。
动效选材优先级：SVG > 纯 CSS > GIF
404 页面体积敏感，又常被爬虫或监控工具快速加载。嵌入大 GIF 或外链图标会拖慢首屏、增加失败率：
真正容易被忽略的，是动效节奏与错误语境的匹配——404 是中断态，微交互不该欢快跳跃，而应带一点“歉意节奏”：缓入缓出、轻微位移、低饱和度色彩变化。一个 transform: translateX(-2px) 配 0.35s duration，比弹跳动画更符合场景。
