当前位置：首页 > news >正文

前端-动画库Lottie 3分钟学会使用

news 2026/5/20 1:36:22

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语言

按照所给的代码引入即可

前端-动画库Lottie 3分钟学会使用

目录 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.…...

编程日记 2025/1/2 11:49:13

智能工厂的设计软件应用场景的一个例子：为AI聊天工具添加一个知识系统之5

本文要点前端问题描述语言本文继续完善 “描述” ---现在我们应该可以将它称为 “问题problem描述语言 ”。它通过对话框的question 引发表征的issue 的“涌现” 最终厘清应用程序的“problem”。即它合并了 ISO七层模型中的上面三层，通过将三层分别形成…...

编程日记 2025/1/2 11:48:12

java web

流程 1.浏览器发送http协议的格式数据和url给服务器软件tomcat 2.浏览器解析http格式数据并创建request和response对象,把数据封装到request对象里。 3.tomcat解析url确定访问路径，如果是静态资源html等，直接将html数据作为http格式响应体返回&#x…...

编程日记 2025/1/2 11:47:11

【嵌入式软件开发】嵌入式软件计时逻辑的两种实现：累加与递减的深入对比

本文主要从四个方面详细阐述了嵌入式软件编程中计时逻辑的两种实现方式：累加和递减。让我为您详细解析各个部分： 1. 基本概念对比累加方式从0开始向上计数每个周期增加固定值（通常为1）类似于我们日常生活中的秒表计时方式递减方式从预设值开始向下计数每个周期减少固定…...

编程日记 2025/1/2 11:45:09

如何将vCenter6.7升级7.0？

vCenter是什么？ vCenter是一种虚拟化管理软件，由VMware公司开发和发布。它是VMware vSphere虚拟化平台的核心组件之一，主要用于集中管理和监控虚拟化环境中的虚拟机、虚拟存储和网络资源。vCenter可以实现对多个ESXi主机的集中管理&#xff…...

编程日记 2025/1/2 11:41:04

服务器网卡绑定mode和交换机的对应关系

互联网各领域资料分享专区(不定期更新)： Sheet 模式类别网卡绑定mode共有七种(0~6): bond0、bond1、bond2、bond3、bond4、bond5、bond6 mode详解 mode0 ，即:(balance-rr) Round-robin policy(平衡轮循环策略，需要配置交换机静态聚合) mode…...

编程日记 2025/1/2 11:39:02

Maven (day04)

什么是maven? Maven 是 Apache 旗下的一个开源项目，是一款用于管理和构建 java 项目的工具。官网：Welcome to Apache Maven – Maven https://maven.apache.org/ Maven的作用依赖管理（方便快捷的管理项目依赖的资源(jar包)&#xff…...

编程日记 2025/1/2 11:37:00

Echart实现3D饼图示例

在可视化项目中，很多地方会遇见图表；echart是最常见的；这个示例就是用Echart， echart-gl实现3D饼图效果，复制即可用 //需要安装，再引用依赖import * as echarts from "echarts"; import echar…...

编程日记 2025/1/2 11:34:58

UE5 Debug的一些心得

1、BUG粗略可分为两类： 一种是显性的，编译直接就通不过，必须马上解决。第二种是隐性的，新功能完成后，编译成功顺利运行，洋洋自得，而问题隐藏在幕后，测试之后才逐渐发现有问题&…...

编程日记 2025/1/2 11:32:55

java中多线程的一些常见操作

Java 中的多线程是通过并发编程来提高应用程序的效率和响应速度。Java 提供了多个机制和类来支持多线程编程，包括继承 Thread 类、实现 Runnable 接口、使用线程池等。以下是 Java 中一些常见的多线程操作和应用场景。 1. 创建线程 1.1 通过继承 Thread 类创建线程…...

编程日记 2025/1/2 11:27:49

【gopher的java学习笔记】什么是Spring - IoC和DI

一聊到java，离不开的一个东西就是spring；当我想了解什么是spring的时候，一查，基本上都是围绕着两个词来展开的：IoC和AOP。对于我自己来说，AOP我觉得比较好理解，因为不管是之前写golang还是pyt…...

编程日记 2025/1/2 11:23:43

【开源免费】基于SpringBoot+Vue.JS校园社团信息管理系统（JAVA毕业设计）

本文项目编号 T 107 ，文末自助获取源码 \color{red}{T107，文末自助获取源码} T107，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/1/2 11:21:40

设计模式创建型工厂模式（Factory Pattern）与常见技术框架应用解析

工厂模式（Factory Pattern）是一种创建型设计模式，它提供了一种封装对象创建过程的方式，使得对象的创建与使用分离，从而提高了系统的可扩展性和可维护性。一、核心思想工厂模式的核心思想是将“实例化对象”的操作与…...

编程日记 2025/1/2 11:19:38

pip 下载安装时使用国内源配置

pip 是 Python 的包管理工具，用于安装和管理第三方库。然而，在某些情况下，默认的 PyPI（Python Package Index）源可能由于网络原因导致下载速度慢或者连接不稳定。幸运的是，我们可以轻松地配置 pip 使用国内…...

编程日记 2025/1/2 11:18:34

【数据结构】数据结构简要介绍

数据结构是计算机科学中用于组织、管理和存储数据的方式，以便于高效地访问和修改数据。数据结构的分类： 数据结构可以大致分为两类：线性结构和非线性结构。 1. 线性结构线性结构中的数据按顺序排列，每个元素有唯一的前驱和后…...

编程日记 2025/1/2 11:17:32

数据分析-Excel

数据类型和函数初步 Excel中有文本类型和数值类型–但是无法用肉眼分辨出来isnumber来区分是否是数值类型text和value函数可以完成数值类型以及文本类型的转换单元格第一位输入’方式明确输入的是文本sum函数必须是数值类型文本连接-and-or-not-if-mod-max函数字符串的连接…...

编程日记 2025/1/2 11:16:31

Yocto项目—机器配置文件详解

引言在Yocto项目中，机器配置文件（Machine Configuration File）是系统定制化的重要组成部分，直接决定了构建的目标平台硬件特性和能力。本文将深入探讨Yocto项目中的机器配置文件，从其作用、结构到具体配置方法&#…...

编程日记 2025/1/2 11:14:28

30天开发操作系统第 10 天 -- 叠加处理

前言得益于昨天的努力，我们终于可以进行内存管理了。不过仔细一看会注意到，bootpack.c都已经有254行了。笔者感觉这段程序太长了，决定整理一下，分出一部分到memory.c中去。(整理中)…好了，整理完了。现在bootpack.c变…...

编程日记 2025/1/2 11:11:24

第十讲比特币的社会与文化影响

比特币作为一种革命性的数字货币，不仅在经济领域产生了深远的影响，也在社会和文化层面引发了广泛的讨论和变革。本文将探讨比特币如何塑造我们的社会观念、文化趋势以及对未来的展望。一、比特币与社会观念的变迁比特币的出现挑战了传统的货币观念和…...

编程日记 2025/1/2 11:09:21

Unity2D无限地图的实现（简单好抄）

说明：本教程实现的是在2D游戏中玩家在游戏中上下左右移动的时候自动进行地图拼接的功能，如果你只想实现左右移动的无限地图，那么这篇博客也能起到一定参考作用。思路第一步： 创建一个10*10的2D游戏对象当做地图第二步创建一个…...

编程日记 2025/1/2 11:06:18

LabVIEW项目实战：用‘类+队列’模式管理仪器参数，告别全局变量混乱

LabVIEW工程实践：基于类与队列的仪器参数管理框架设计在工业自动化测试系统中，仪器参数管理一直是困扰工程师的典型难题。当系统需要同时控制网口、串口、GPIB等多种接口的测试设备时，传统的全局变量方案会导致参数耦合、修改不同步等问题。…...

编程新知 2026/5/20 1:35:01

记一次 mac openClaw gateway 启动未正常关闭导致的问题

openclaw 目前是一个比较火的 AI 工具，因为其高权限带来了一系列的风险和安全隐患按照官方步骤删除后，因open claw 的 gateway 没有正常关闭，导致端口一直在后台运行如果您也遇到类似的问题，可在 mac 终端执行如下命令进行关闭1.先…...

编程新知 2026/5/20 1:18:33

WebPlotDigitizer技术架构深度解析：计算机视觉驱动的图表数据提取引擎

WebPlotDigitizer技术架构深度解析：计算机视觉驱动的图表数据提取引擎【免费下载链接】WebPlotDigitizer Computer vision assisted tool to extract numerical data from plot images. 项目地址: https://gitcode.com/gh_mirrors/we/WebPlotDigitizer 在科…...

编程新知 2026/5/20 1:10:21

前端工程化18：前端单元测试Jest实战，保障项目代码稳定性

前端工程化18：前端单元测试Jest实战，保障项目代码稳定性文章目录前端工程化18：前端单元测试Jest实战，保障项目代码稳定性前言一、单元测试核心概念 1. 什么是单元测试 2. 单元测试优势 3. 适用测试场景二、Jest环境快速搭建 1. 安装依赖 2. 新增测试运行脚本 3. 目录规…...

编程新知 2026/5/20 0:23:11

【.NET新特性·第1篇】.NET 8：统一平台的成熟之作

三年磨一剑，.NET 8 是微软统一平台战略的首个 LTS 里程碑版本版本定位适用版本：.NET 8 | LTS（长期支持） 支持周期：3 年（2023.11 - 2026.11） 前置知识：.NET 6/7 或其他版本的 C# 开…...

编程新知 2026/5/19 23:10:19

【JavaSE全面教学】Java集合框架下Day13（2026年）

写在前面：这是JavaSE系列的第13篇。上一篇讲了List家族，今天来讲Set和Map。HashMap是面试中问得最多的集合类，底层原理必须搞懂。建议收藏，反复看。文章目录一、Set集合：不可重复1.1 Set的特点1.2 HashSet1.3 Linked…...

编程新知 2026/5/19 23:08:17

【无人机协同】联合优化无人机轨迹、发射功率与地面用户-MEC关联的多无人机多地面用户系统附matlab代码✅

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎完整代码获取定制创新论文复现点击：Matlab科研工作室👇 关注我领取海量m…...

编程新知 2026/5/19 23:04:06

国内用户怎么注册.ai域名？2026最新AI域名注册规则+平台推荐

随着人工智能（AI）行业的持续爆发，越来越多企业在搭建官网时，开始优先选择 .ai域名。你会发现一个明显变化： 👉 很多AI工具、AI平台，直接使用“.ai”作为网站后缀这背后的原因，其…...

编程新知 2026/5/19 22:59:55

ESP32-S3-DevKitC-1驱动3.5寸ILI9488 TFT：从零构建LVGL音乐播放器UI

1. 硬件准备与环境搭建拿到ESP32-S3-DevKitC-1开发板和3.5寸ILI9488屏幕时，我第一反应是检查引脚兼容性。这块480x320分辨率的SPI屏需要连接6个关键引脚：SCK、MOSI、MISO、CS、DC和RST。实际接线时有个坑要注意——开发板的默认SPI引脚可能与屏幕要求不…...

编程新知 2026/5/19 19:32:33

为内部知识库问答系统集成taotoken多模型路由提升回答质量

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度为内部知识库问答系统集成taotoken多模型路由提升回答质量构建一个高效、准确的内部知识库问答系统，是许多企业提升信…...

编程新知 2026/5/19 19:23:10

1. Lottie地址

2. 使用html实操

3. 也可以选择其他的语言

相关文章：