首选CSS @keyframes实现轻量级动态背景，需用fixed定位全屏div并设z-index:-1；Canvas粒子用tsParticles库；SVG动画应内联并用；须遵守减少运动、不遮文字、不阻塞首屏三大约束。
用 CSS @keyframes 实现轻量级动态背景
纯 HTML 页面加动态背景，首选 CSS 动画，不依赖 JS、不增加请求、兼容性好。核心是定义一个全屏 div 作为背景层，用 @keyframes 控制颜色渐变、位移或缩放。
常见错误是直接给 body 写动画——滚动时会抖动，且无法覆盖整个视口。正确做法是额外加一层 div 并设为 position: fixed：
- 必须加
z-index: -1，否则会盖住页面内容 -
background-size: 200% 200%配合background-position才能实现平滑渐变位移 - 动画时长建议 ≥8s，太快易眩晕；
ease-in-out比linear更自然
Canvas 动态粒子背景：适合需要交互或复杂效果
如果要粒子飘动、鼠标跟随、连线效果，CSS 不够用，得上 。但别手写全部逻辑——用轻量库如 tsParticles（原 particles.js）最稳妥。
错误做法是引入完整版 three.js，对个人页属于严重过载。正确姿势是 CDN 引入 min 版本 + 精简配置：
MDWechat微信主题模块
下载
MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和 状态栏 颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float
立即学习“前端免费学习笔记（深入）”；
-
id="tsparticles"必须和load()第一个参数一致 - 粒子数设
60左右即可，超过 100 在低端机上掉帧 - 禁用
interactivity.detectsOn: "canvas"，否则鼠标移出 canvas 就失效
避免「动态背景毁体验」的三个硬约束
动态背景不是炫技工具，一不小心就拖慢加载、干扰阅读、触发癫痫风险。以下三点必须检查：
- 动画必须设
prefers-reduced-motion: reduce媒体查询降级。用户开启系统“减少运动”时，直接停掉所有animation或切为静态色块 - 背景图/粒子不能遮挡文字。用
mix-blend-mode: multiply或调低背景透明度（rgba(255,255,255,0.05)），别靠“用户自己调亮度”来解决可读性 - 首屏关键资源不能被背景动画阻塞。把
放在
