如何在我的项目中使用 useanimations.com 提供的图标答案

【问题标题】：How I can use icons provided by useanimations.com in my project如何在我的项目中使用 useanimations.com 提供的图标
【发布时间】：2021-09-28 03:22:57
【问题描述】：

我正在尝试在我的项目中使用 useanimations.com 提供的图标，但在下载特定图标后，我不知道如何处理图标的 json 文件......而且不知何故动画也没有运行？请帮忙

【问题讨论】：

标签： javascript html css json icons

【解决方案1】：

本网站介绍了如何设置 Lottie Player 以运行动画，然后链接到动画。

https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page

第 1 步：将以下脚本添加到页面的 head 部分：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

第 2 步：通过将动画上传到您的网站或使用公共链接获取动画的 URL

第 3 步：将以下代码复制并粘贴到您希望它出现在您网站上的位置。 URL 应该是 Lottie 动画文件的链接。

<lottie-player src="<URL HERE>" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

就是这样。

【讨论】：

【解决方案2】：

使用Lotties播放器

来源：https://lottiefiles.com/web-player

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
<lottie-player id="firstLottie" src="https://assets8.lottiefiles.com/packages/lf20_rx3jheuy.json" style="width:200px; height: 200px;" autoplay loop></lottie-player>

【讨论】：