Lottie图标json文件怎么在HTML里用？-砝码网

要在 HTML 页面中使用 Lottie 动画，你需要遵循以下步骤：

1、引入 Lottie 库文件：在 HTML 页面的 <head> 部分引入 Lottie 库文件。你可以通过 CDN 获取 Lottie 库文件，也可以将它下载到本地并引入。

<head>
    <!-- 引入 Lottie CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.13/lottie.min.js"></script>
</head>

2、创建容器元素：在 HTML 页面中创建一个容器元素，用于放置 Lottie 动画。

<div id="lottie-container" style="width: 300px; height: 300px;"></div>

确保设置容器元素的宽度和高度，以便适应你的动画尺寸。

3、加载 Lottie 动画：在 JavaScript 中加载并播放 Lottie 动画。

<script>
    // 获取容器元素
    var container = document.getElementById('lottie-container');
    // 设置动画配置
    var animation = bodymovin.loadAnimation({
        container: container, // 容器元素
        renderer: 'svg', // 渲染器类型，可以是 'canvas' 或 'svg'
        loop: true, // 是否循环播放
        autoplay: true, // 是否自动播放
        path: 'your-animation.json' // Lottie 动画 JSON 文件的路径
    });
</script>

确保将 ‘your-animation.json’ 替换为你实际的 Lottie 动画 JSON 文件的路径。

4、修改样式（可选）：可以根据需要修改容器元素的样式，如宽度、高度、边框等，以适应页面布局。

通过以上步骤，你就可以在 HTML 页面中成功使用 Lottie 动画了。记得替换相应的 JSON 文件路径和容器元素大小，以确保动画正常显示。