前端实现lottie动画

最新推荐文章于 2025-03-16 20:05:20 发布

姽式、

最新推荐文章于 2025-03-16 20:05:20 发布

阅读量826

点赞数 1

分类专栏： js&jq 文章标签： js javascript 动画前端

本文链接：https://blog.youkuaiyun.com/weixin_45936690/article/details/121654009

版权

js&jq 专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>lottie 极简Demo</title>
    <!-- 第一步: 引入CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
  </head>
  <body>
    <!-- 第二步: 创建容器 -->
    <div id="container"></div>
  </body>
  <script>
    // 第三步: 实例化
    var anim = lottie.loadAnimation({
      container: document.getElementById("container"), // 容器
      renderer: "svg",
      loop: true,
      autoplay: true,
      path:"load.json" // json地址，可以为网络地址
    });
  </script>
</html>