HTML 直接嵌入——纯静态页面的最简方案

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Lottie Web Demo</title>
  <style>
    #lottie-container {
      width: 300px;
      height: 300px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <!-- 空 div 作为动画容器 -->
  <div id="lottie-container"></div>

  <!-- 引入 lottie-web CDN：从 cdnjs.com 搜索 lottie-web 获取最新版本 -->
  <script src="CDN 托管地址"></script>

  <script>
    // 加载动画
    const animation = lottie.loadAnimation({
      container: document.getElementById('lottie-container'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'loading.json', // 本地文件，或 CDN URL
    });
  </script>
</body>
</html>

关键参数说明

lottie.loadAnimation() 接收一个配置对象，核心参数：

参数	类型	必需	含义
`container`	HTMLElement	✅	动画渲染的容器 DOM
`renderer`	string	✅	`svg` / `canvas` / `html`
`path`	string	二选一	JSON 文件 URL
`animationData`	object	二选一	直接传入 JSON 对象（内联动画）
`loop`	boolean / number	❌	循环次数，`true` = 无限，默认 `true`
`autoplay`	boolean	❌	加载完是否自动播放，默认 `true`
`name`	string	❌	给动画起名，后续可以通过 `lottie.searchAnimations()` 查找

两种加载方式

方式一：path（外部文件）

path: 'loading.json'

适合动画文件独立存放、可以被浏览器缓存的场景。

方式二：animationData（内联对象）

animationData: { /* 整个 JSON 对象直接内嵌 */ }

适合动画很小（几 KB）、想减少一个请求的场景。可以把 JSON 内容直接复制粘贴进来。

容器样式

动画会填满容器的宽高，所以容器一定要有明确的宽高：

用 CSS width / height 设置。
或者容器本身是 inline-block 并由子元素撑开（不太可控，不推荐）。
响应式方案：容器用 width: 100%; max-width: 300px; aspect-ratio: 1;，动画会自适应缩放。

多动画同页

同一个页面可以创建多个动画——每个调用 lottie.loadAnimation() 返回一个独立的 player 对象，互不干扰：

const anim1 = lottie.loadAnimation({ /* 配置1 */ });
const anim2 = lottie.loadAnimation({ /* 配置2 */ });