lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载时机不当；本文详解如何正确引入 lottie player 并确保动画正常渲染。

lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载时机不当；本文详解如何正确引入 lottie player 并确保动画正常渲染。

Lottie 动画依赖自定义 HTML 元素 和对应的 JavaScript 库协同工作。若动画空白无响应，首要排查点往往是引号类型——许多用户从 Lottie 官网或设计工具复制嵌入代码时，会无意中粘贴带中文全角引号（“ 和 ”）的属性值，例如：

<!-- ❌ 错误：使用了中文全角引号（U+201C / U+201D） -->
<lottie-player src="%E2%80%9Chttps://example.com/anim.json%E2%80%9D" loop autoplay></lottie-player>

这类引号在 HTML 解析中会被视为非法字符，导致整个标签解析失败，浏览器直接忽略该元素。正确写法必须使用标准 ASCII 双引号 " 或单引号 '：

<!-- ✅ 正确：使用英文半角引号 -->
<lottie-player src="https://lottie.host/b35cc63e-e72a-4978-add6-d71a6cbcfdab/SQ1XbCeUpR.json" background="#ffffff" speed="1" style="width: 300px; height: 300px;" loop controls autoplay direction="1" mode="normal"></lottie-player>

其次，脚本加载位置至关重要。Lottie Player 库必须在 标签被解析之后加载，否则浏览器尚未识别该自定义元素，便无法初始化动画。因此，推荐将 <script> 标签置于 </script>