如何在CSS中引入并配置Lottie动画的样式容器？

Lottie 动画需显式设置容器宽高，推荐用 p + 内联样式或 class 控制；renderer 参数决定 DOM 类型及 CSS 可控范围；CSS 变量须通过 rendererSettings 注入且需 JSON 文件支持；务必添加 overflow: hidden 防止溢出。

直接用 p 容器 + 内联尺寸控制即可，Lottie 本身不依赖 CSS 类名或特殊样式规则，但容器尺寸和渲染上下文必须明确。

容器 DOM 元素必须显式设置宽高

Lottie 渲染时不会自动撑开父容器，如果 p 没有宽高，动画会塌缩成 0×0 区域，甚至完全不可见。

• 错误写法：<p id="lottie-container"></p>（无样式，动画不显示）
• 正确写法：<p id="lottie-container" style="width: 200px; height: 200px;"></p>
• 也可用 class 控制：.lottie-container { width: 100%; height: 240px; }，但需确保父容器有有效宽度
• 响应式场景建议用 aspect-ratio 配合 max-width，避免 SVG 渲染变形

renderer 设置决定容器内元素类型

renderer 参数不仅影响性能，还决定生成的 DOM 结构，进而影响 CSS 选择器和样式作用范围：

• renderer: 'svg' → 生成 <svg> 元素，可直接用 CSS 选中 svg 或其子 path、g 节点（但仅限颜色、opacity 等有限属性）
• renderer: 'canvas' → 生成 <canvas> 元素，CSS 只能控制画布整体（如背景、边框），无法穿透修改内部图形
• renderer: 'html' → 生成普通 HTML 元素（p、img 等），可自由加 class、绑定事件，但兼容性和性能较差，极少使用

CSS 变量不能直接写在容器上，得靠 JavaScript 注入

很多人误以为给容器加 style="--lottie-color: #ff0000" 就能让动画变色——其实没用。Lottie 不读取容器上的自定义属性，必须通过 rendererSettings 或 JSON 数据层映射。

立即学习“前端免费学习笔记（深入）”；

• 正确方式是：在 loadAnimation 的配置里传入 rendererSettings: { primaryColor: 'var(--lottie-primary-color)' }
• 然后用 document.documentElement.style.setProperty('--lottie-primary-color', '#00aaff') 动态改值
• 注意：只有部分 Lottie JSON 文件支持变量注入，需设计师导出时启用“支持 CSS 变量”选项（Bodymovin 插件 v5.9+）

最容易被忽略的是：容器的 overflow: hidden 缺失会导致动画关键帧移出边界时意外显示裁剪内容，尤其在循环缩放或位移动画中——加一句 overflow: hidden 能省掉一半调试时间。