目录
1. Lottie地址
2. 使用html实操
3. 也可以选择其他的语言
1. Lottie地址
LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!
https://lottiefiles.com/
2. 使用html实操
随便选择一个你想使用的动画，点击进入如图所示，然后点击Download下载
然后点击Handoff，然后开启CDN
现在可以看到 Asset link 是该资源的地址
那么如何在html中使用呢？
在下方的Enable HTML中复制该代码块，放入html文件中即可使用
例如我创建了一个html文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>lottie 使用</title>
</head>
<body><script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script><dotlottie-player src="https://lottie.host/f598a27a-e6e1-4638-b1a4-b4afc9a2e27d/UcrRKeADNE.lottie" background="transparent" speed="1" style="width: 300px; height: 300px" loop autoplay></dotlottie-player>
</body>
</html>那么显示效果如下所示：
这段代码是用于在网页上嵌入一个Lottie动画的示例。下面是对代码的详细说明：
- <script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>: 这一行代码通过<script>标签引入了一个JavaScript模块，这个模块是@dotlottie/player-component的版本2.7.12，它是一个用于播放Lottie动画的组件。
- type="module"表示这是一个ES模块，它允许你在浏览器中使用import和export语句。
- <dotlottie-player src="https://lottie.host/f598a27a-e6e1-4638-b1a4-b4afc9a2e27d/UcrRKeADNE.lottie" background="transparent" speed="1" style="width: 300px; height: 300px" loop autoplay></dotlottie-player>: 这是一个自定义元素，dotlottie-player，用于在网页上展示Lottie动画。
- src属性定义了动画文件的URL，这里是https://lottie.host/f598a27a-e6e1-4638-b1a4-b4afc9a2e27d/UcrRKeADNE.lottie，它指向了一个Lottie文件。 background="transparent"设置了动画的背景为透明。
- speed="1"定义了动画的播放速度，1表示正常速度。
- style="width: 300px; height: 300px"定义了动画的尺寸，宽度和高度都是300像素。
- loop是一个布尔属性，表示动画是否循环播放。
- autoplay也是一个布尔属性，表示动画是否在加载后自动播放。
将这段代码放入HTML文件中，并在浏览器中打开，你将看到一个300x300像素的Lottie动画，该动画是透明的背景，会自动播放并循环。
3. 也可以选择其他的语言
以Vue为例说明，点击下方的More
选择Vue语言
按照所给的代码引入即可
