三种 CSS 动画背景预设
Backgrounds Generator 提供三种纯 CSS 动画预设，每种对应一类视觉风格。
散景效果（Bokeh）模拟相机镜头虚化光斑，动态背景的视觉强度最低，适合内容型页面打底。旋转矩形（Rotating Rectangles）呈现连续旋转的矩形阵列，节奏感强，适合做 hero section 或分隔区块。旋转/增长立方体（Rotating/Growing Cubes）是动态旋转且尺寸变化的立方体阵列，密度感较强，使用时需注意避免抢夺内容焦点。
每个预设都暴露速度、大小、颜色三个核心参数，调整过程所见即所得。调整完成后可一键复制 HTML 与 CSS 代码片段，生成的全部是纯 CSS，没有 JS 依赖，单段代码体积通常在 2-4 KB 之间。
与 Magic Pattern 等动画生成器的横向对比
该平台与 Magic Pattern、SVG Backgrounds 等工具的核心差异体现在动画类型与输出格式上。
| 特性 | Backgrounds Generator | Magic Pattern / SVG Backgrounds |
|---|---|---|
| 动画类型 | 3 种预设 | 几十种（blob、波浪、几何图形等） |
| 输出格式 | 纯 CSS | SVG / CSS，部分支持 JS |
| 高级参数 | 速度/大小/颜色 | 关键帧、缓动曲线、混合模式 |
| 定价 | 完全免费 | 部分免费，高级样式付费 |
3 种预设与几十种预设的差距，决定了各自的适用方向。如果需要 blob 流体或波浪渐变，这款工具无法满足；但如果只想加一个不抢戏的背景纹理，三种预设已经够用，而且零依赖、零运行时开销。
适合的典型场景
该网站最合适的三种用法：
- 个人作品集首页：背景纹理不能抢作品图，散景效果的低强度动态刚好匹配这一需求。
- 客户端 demo 原型：演示阶段需要看起来精致，但交付阶段会被替换。纯 CSS 的好处是可以快速验证、随时移除。
- 着陆页 hero 区：旋转矩形作为 hero 背景，配合大标题，能同时提升节奏感与现代感。
不合适的场景包括内容密集的列表页（背景会干扰阅读）、移动端首屏（性能开销较大）、需要 blob 流体的品牌官网（动画类型不够）。
集成时的两个隐性成本
纯 CSS 不等于零成本。生成的代码大量使用 transform、box-shadow 和 animation 属性，在低端安卓机（骁龙 4 系及以下）上跑散景动画会触发持续重绘，出现明显掉帧。这一问题通常在上线一周后才会在性能监控中暴露。建议给容器加 will-change: transform，并把背景元素限定在视口范围内。
第二个隐性点是 Safari 兼容。旋转立方体在 Safari 14 及更早版本中的 transform-origin 计算有偏差，复制代码后必须在 Safari 实测一次再上线，否则可能出现立方体偏移到容器外的视觉事故。
