lottie 动画需显式设置容器宽高，推荐用 div + 内联样式或 class 控制；renderer 参数决定 dom 类型及 css 可控范围；css 变量须通过 renderersettings 注入且需 json 文件支持；务必添加 overflow: hidden 防止溢出。
直接用 div 容器 + 内联尺寸控制即可，Lottie 本身不依赖 CSS 类名或特殊样式规则，但容器尺寸和渲染上下文必须明确。
容器 DOM 元素必须显式设置宽高
Lottie 渲染时不会自动撑开父容器，如果 div 没有宽高，动画会塌缩成 0×0 区域，甚至完全不可见。
- 错误写法：
<div id="lottie-container"></div>（无样式，动画不显示） - 正确写法：
<div id="lottie-container" style="width: 200px; height: 200px;"></div> - 也可用 class 控制：
.lottie-container { width: 100%; height: 240px; }，但需确保父容器有有效宽度 - 响应式场景建议用
aspect-ratio配合 max-width，避免 SVG 渲染变形
renderer 设置决定容器内元素类型
renderer 参数不仅影响性能，还决定生成的 DOM 结构，进而影响 CSS 选择器和样式作用范围：
-
renderer: 'svg'→ 生成<svg></svg>元素，可直接用 CSS 选中svg或其子path、g节点（但仅限颜色、opacity 等有限属性） -
renderer: 'canvas'→ 生成<canvas></canvas>元素，CSS 只能控制画布整体（如背景、边框），无法穿透修改内部图形 -
renderer: 'html'→ 生成普通 HTML 元素（div、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 能省掉一半调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
