首选CSS @keyframes实现轻量级动态背景，需用fixed定位全屏div并设z-index:-1；Canvas粒子用tsParticles库；SVG动画应内联并用<animateTransform>；须遵守减少运动、不遮文字、不阻塞首屏三大约束。
用 CSS @keyframes 实现轻量级动态背景
纯 HTML 页面加动态背景，首选 CSS 动画，不依赖 JS、不增加请求、兼容性好。核心是定义一个全屏 div 作为背景层，用 @keyframes 控制颜色渐变、位移或缩放。
常见错误是直接给 body 写动画——滚动时会抖动，且无法覆盖整个视口。正确做法是额外加一层 div 并设为 position: fixed：
<div id="bg-animation"></div>
<style>
#bg-animation {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1);
z-index: -1;
animation: bgShift 12s ease-in-out infinite;
}
@keyframes bgShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
- 必须加
z-index: -1，否则会盖住页面内容 -
background-size: 200% 200%配合background-position才能实现平滑渐变位移 - 动画时长建议 ≥8s，太快易眩晕；
ease-in-out比linear更自然
Canvas 动态粒子背景：适合需要交互或复杂效果
如果要粒子飘动、鼠标跟随、连线效果，CSS 不够用，得上 <canvas>。但别手写全部逻辑——用轻量库如 tsParticles（原 particles.js）最稳妥。
错误做法是引入完整版 three.js，对个人页属于严重过载。正确姿势是 CDN 引入 min 版本 + 精简配置：
立即学习“前端免费学习笔记（深入）”；
<div id="tsparticles"></div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@3.0.3/tsparticles.confetti.min.js"></script>
<script>
tsParticles.load("tsparticles", {
particles: {
number: { value: 60 },
color: { value: ["#ff6b6b", "#4ecdc4", "#44b5b1"] },
move: { enable: true, speed: 0.5 },
size: { value: 3 }
},
interactivity: { detectsOn: "window", events: { onhover: { enable: true, mode: "repulse" } } }
});
</script>
-
id="tsparticles"必须和load()第一个参数一致 - 粒子数设
60左右即可，超过 100 在低端机上掉帧 - 禁用
interactivity.detectsOn: "canvas"，否则鼠标移出 canvas 就失效
避免「动态背景毁体验」的三个硬约束
动态背景不是炫技工具，一不小心就拖慢加载、干扰阅读、触发癫痫风险。以下三点必须检查：
- 动画必须设
prefers-reduced-motion: reduce媒体查询降级。用户开启系统“减少运动”时，直接停掉所有animation或切为静态色块 - 背景图/粒子不能遮挡文字。用
mix-blend-mode: multiply或调低背景透明度（rgba(255,255,255,0.05)），别靠“用户自己调亮度”来解决可读性 - 首屏关键资源不能被背景动画阻塞。把
<script>放在</body>前，CSS 动画样式内联在<head>中，别走外部 CSS 文件
SVG 背景动画：适合几何图形与低功耗场景
如果想要旋转齿轮、流动波浪、呼吸式环形，SVG 是比 Canvas 更轻、更易缩放、更利于 SEO 的选择。关键是把动画写进 SVG 内部，而不是用 CSS 控制 SVG 元素。
例如一个旋转的抽象圆环，直接在 <svg> 里用 <animateTransform>：
<svg width="0" height="0" style="position: absolute">
<defs>
<g id="ring">
<circle cx="0" cy="0" r="40" fill="none" stroke="#4ecdc4" stroke-width="2"/>
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="20s" repeatCount="indefinite"/>
</g>
</defs>
</svg>
<div style="background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><use href="#ring" x="50" y="50"/></svg>') center/cover"></div>
- SVG 必须内联或转为 data URL，外链 SVG 不支持
<use>引用内部<defs> -
dur="20s"是关键——太短显得机械，太长失去“动态感” - 不要给 SVG 容器加
width/height，用viewBox和 CSSbackground-size控制缩放
真正难的不是让背景动起来，而是让它动得克制、动得不可察觉、动得用户根本没意识到你在动——却记住了那个瞬间的质感。
