wukai
/
twin-web


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lottie</title>
    <!-- 重点：引入Lottie JS 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
    <script src="Loading.json.js"></script>
    <style>
      #app {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <!-- 定义动画渲染的容器 -->
    <div id="app"></div>
  </body>
  <script>
    // loadAnimation 渲染动画
    const lottieAnimationItem = lottie.loadAnimation({
      // 选取一个容器，用于渲染动画
      container: document.querySelector("#app"),
      // 定义JSON文件路径
      path: lottiedata,
      // 是否循环播放
      loop: true,
      // 渲染的格式svg/canvas/html，svg性能更优，兼容性更好
      renderer: "svg",
    });
  </script>
</html>