讲师中心 微信公众号
首页 专区 Hot
Skill
办公效率 内容创作 开发编程 数据分析 设计多媒体 AI Agent 知识管理 商业运营 教育学习 行业专业 IT运维与安全 生活服务 展开
文章
php教程 后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻 展开
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻 展开
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础 展开
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础 展开
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏 PHP运行环境 Skill 展开
Hot PDF
PDF转word PDF合并 PDF压缩 图片转PDF PDF转excel PDF转ppt 展开
AI工具推荐 视频效率加速
当前位置：首页 > web前端 > html教程 >

正文

如何正确在网页中嵌入 Lottie 动画（使用 Bodymovin）

雨墨吖_3157

雨墨吖_3157

发布时间：2026-07-24 23:24:01

|

543人浏览过

|

来源于php中文网

原创

如何正确在网页中嵌入 Lottie 动画（使用 Bodymovin）

Lottie 动画无法显示通常是因为容器元素类型或配置错误；关键在于必须使用 <div> 作为容器而非 <canvas>，并确保路径、渲染器与库版本兼容。

如何正确在网页中嵌入 lottie 动画（使用 bodymovin）：lottie 动画无法显示通常是因为容器元素类型或配置错误；关键在于必须使用 `

` 作为容器而非 ``，并确保路径、渲染器与库版本兼容。

Lottie 动画依赖 Bodymovin（现为 lottie-web）库进行渲染，其核心机制是动态创建 SVG 或 Canvas 内容并注入指定 DOM 容器。因此，容器本身不能是 <canvas> 标签——它只是占位符，而非渲染目标。Bodymovin 会根据 renderer 配置（如 'svg'、'canvas' 或 'html'）自动创建对应类型的子节点，并挂载到你提供的 父级容器元素（必须是 div、section 等通用块级容器） 中。

✅ 正确做法：

  • 使用 <div id="lottie-container"></div> 作为容器（支持宽高样式控制）；
  • 推荐通过 CSS 设置尺寸（width/height），而非 HTML 属性（width/height 在 <div> 上无效）；
  • 确保 .json 动画文件路径正确，且服务器支持静态文件访问（开发时建议使用本地服务如 http-server 或 VS Code Live Server，避免 file:// 协议跨域限制）；
  • 使用较新稳定版库（如 5.12.2+），旧版本可能存在兼容性问题。

以下是完整可运行示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lottie 动画嵌入示例</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
  <style>
    #lottie-container {
      width: 300px;
      height: 300px;
      margin: 20px auto;
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <!-- ✅ 正确容器：div，非 canvas -->
  <div id="lottie-container"></div>

  <script>
    // 加载动画配置
    bodymovin.loadAnimation({
      container: document.getElementById('lottie-container'), // 指向 div 元素
      renderer: 'svg', // 推荐优先使用 'svg'（兼容性好、缩放无损）
      loop: true,
      autoplay: true,
      path: './data.json' // 确保该 JSON 文件与 HTML 同目录，且无 CORS 问题
    });
  </script>
</body>
</html>

⚠️ 注意事项：

  • 若使用 renderer: 'canvas'，仍需 <div> 容器——Bodymovin 会在其中插入 <canvas> 元素，而非复用你手动写的 <canvas> 标签；
  • 调试技巧：打开浏览器开发者工具 → Console 查看是否报错（如 404 Not Found 表示 JSON 路径错误，Cannot read property 'appendChild' 多因容器未找到）；
  • 响应式需求？可将 width/height 改为 100% 并配合父容器约束，或使用 lottie-player Web Component（更现代的封装方案）；
  • 生产环境建议：使用 import { loadAnimation } from 'lottie-web'; 方式引入，配合构建工具优化打包体积。

总结：容器必须是语义化容器元素（如 <div>），而非预设渲染目标（如 <canvas>）；路径、网络权限与库版本三者缺一不可。 只需一次修正，即可让精美的 Lottie 动画流畅呈现。

相关文章

Composer关键帧火焰燃烧的动态演变

如何使用Composer恢复误删关键帧

OPPO手机充电动画效果怎么更换样式

如何使用Composer编辑关键帧参数

H5 中怎么对移动端 H5 页面的首屏 JS 执行时间与动效初始化脚本做按需拆包

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何在 Flutter 中将本地 HTML 文件转换为 Uint8List 下一篇：提取 HTML 字符串中所有非零美元金额的 <span> 文本内容

作者最新文章

只狼x逃离塔科夫？黑暗奇幻动作游戏《怪谈》介绍

2026-10-05 14:34

CSS 实现多层级有序列表：1 → 1.1 → (a) → (i)

2026-10-05 14:36

《战争机器：事变日》过场动画 猛男马库斯完全边缘化

2026-10-05 14:36

如何验证列表是否符合指定的结构模式？

2026-10-05 14:48

Go 中浮点数除法结果为零的常见原因及正确处理方法

2026-10-05 14:48

如何验证列表是否符合给定的结构模式？

2026-10-05 15:28

LLDB Python调试脚本中“invalid thread”错误的解决方法

2026-10-05 15:28

Go语言中统计数组元素出现频次的正确实现方法

2026-10-05 16:20

如何将动态 RecyclerView 数据导出为 iText PDF 文档

2026-10-05 16:34

如何在 Laravel 8 中自定义分页导航结构（保留 HTML 语义与样式）

2026-10-05 16:47

热门AI工具

更多
蛙蛙写作
蛙蛙写作 Hot

一款AI论文写作工具，主要用于超级AI智能写作助手，适合需要提升相关任务效率的用户。

AI文本写作中文写作
火山引擎
火山引擎 Hot

火山引擎是一款面向企业的云计算与AI服务平台。

AI大模型AI编程开发
WorkBuddy
WorkBuddy

一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。

AI办公学习Agent智能体
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具，AI 音乐视频（MV）创作工具。

AI视频创作
DeepSeek
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AI编程开发AI聊天问答
Seko
Seko Hot

一款AI视频创作工具，主要用于商汤科技推出的创编一体的AI短视频创作Agent，适合需要提升相关任务效率的用户。

AI视频创作视频生成
讯飞绘文
讯飞绘文 Hot

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

AI应用软件PC软件
Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

AI文本写作
豆包大模型
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AI编程开发AI大模型

相关专题

更多
html版权符号
html版权符号

html版权符号是“©”，可以在html源文件中直接输入或者从word中复制粘贴过来，php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

5635

2023.06.14

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具，编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方，是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容，供大家免费下载使用。

3212

2023.06.21

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程，html是一种标记语言，它使用标记来描述文档结构和语义，并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容，供大家免费下载体验。

2870

2023.07.31

html空格
html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符，被用于在网页中插入额外的空间，以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容，供大家免费下载体验。

2899

2023.08.01

html是什么
html是什么

HTML是一种标准标记语言，用于创建和呈现网页的结构和内容，是互联网发展的基石，为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

4739

2023.08.11

html字体大小怎么设置
html字体大小怎么设置

在网页设计中，字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性，还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧，帮助您在HTML中设置合适的字体大小。

2841

2023.08.11

html转txt
html转txt

html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容，供大家免费下载体验。

2649

2023.08.31

html文本框代码怎么写
html文本框代码怎么写

html文本框代码：1、单行文本框【<input type="text" style="height:..;width:..;" />】；2、多行文本框【textarea style=";height:;"></textare】。

2368

2023.09.01

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发，整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

80

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
热门推荐
/
最新课程
JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 12万人学习

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)
最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

共79课时 | 161万人学习

phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

最新文章

更多
实用网页特效之HTML轮播图制作
HTML怎么实现点击图片直接触发文件上传
如何掌握HTML图片资源管理基础操作方法
如何设置HTML object标签的name属性
HTML在表单重置时怎么保留已上传的文件
HTML中textarea元素wrap属性怎么控制换行格式
如何使用HTML解析引擎处理动态插入内容
页面刷新后HTML中文乱码怎么解决
如何编写符合标准的HTML响应式布局
HTML object标签怎么嵌入PDF文件
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn

  • 返回顶部