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

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

news 来源：原创 2025/5/16 22:41:17

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/5/16 22:41:17

腾讯云智能结构化 OCR：驱动多行业数字化转型的核心引擎

在当今数字化时代的汹涌浪潮中，数据已跃升为企业发展的关键要素，其高效、精准的处理成为企业在激烈市场竞争中脱颖而出的核心竞争力。腾讯云智能结构化 OCR 技术凭借其前沿的科技架构与卓越的功能特性，宛如一颗璀璨的明星，在交通、…...

编程日记 2025/5/15 21:22:32

【开源免费】基于SpringBoot+Vue.JS精品在线试题库系统（JAVA毕业设计）

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

编程日记 2025/5/14 10:57:53

c# CodeFirst生成表字段加注释

前置：ORM框架工具使用的FreeSql 背景：开发环境中运行接口，所有的表字段以及备注会自动加上，但是在测试环境时运行就只生成了表，没有把每个字段的注释加上问题检查： FreeSql CodeFirst 支持将 c# 代码内的注…...

编程日记 2025/5/14 11:32:42

MySQL8.0复制原理和部署配置步骤

1. mysql 主从复制原理在从库上执行change master to；会将主库的信息保存到从库中的master.info文件中在从库执行start slave;开启io_thread, sql_thread线程;io_thread工作；io_thread通过master.info文件中主库的连接信息去连接主库；连接成…...

编程日记 2025/5/16 15:04:00

Unity热更新文件修改后缀并拷贝到指定路径的工具类

最近在学习Hybrid热更新。每次编译完，需要修改后缀名和拷贝到特定路径覆盖旧文件，就叫AI写了个工具类。现在记录一下，毕竟ai写完还需要修改。代码如下，放到Assets/Editor/路径下即可。可根据需求自行改变路径和文件名。 using…...

编程日记 2025/5/16 22:22:12

前端vue+el-input实现输入框中文字高亮标红效果（学习自掘金博主文章）

学习自掘金文章https://juejin.cn/post/7295169886177918985 该博主的代码基于原生textarea控件和js实现，基于该博主的代码和思路，在vue下实现了相应功能思路生成html字符串来实现文字高亮标红效果，但是input输入控件不能渲染html字符串…...

编程日记 2025/5/14 13:52:01

SAP系统中的标准价、移动平均价是什么？有何区别？物料分类账的优点

文章目录前言一、SAP系统中的价格控制二、移动平均价、标准价是什么？三、S价（标准价）的优势四、S价（标准价）的劣势五、V价（移动平均价）的优势六、V价（移动平均价）的劣势…...

编程日记 2025/5/15 17:39:24

通往O1开源之路

“Scaling of Search and Learning: A Roadmap to Reproduce o1 from Reinforcement Learning Perspective”由复旦大学和上海人工智能实验室的研究者撰写。该论文从强化学习视角出发，深入分析了实现类似OpenAI o1模型性能的路线图，聚焦于策略初始化、奖…...

编程日记 2025/5/12 13:02:45

【QT】实现RestFul接口

在这个教程中，我们将介绍如何在 Qt 中使用 QHttpServer 类来创建一个简单的 HTTP 服务器。QHttpServer 是 Qt 6 引入的新类，用于提供 HTTP 服务。这个类非常适合快速开发restful接口。准备工作确保你的 Qt 版本是 Qt 6 或更高版本，因为 Q…...

编程日记 2025/5/8 15:59:24

ARP攻击的原理和实现（网络安全）

ARP攻击的原理和实现 ARP（Address Resolution Protocol，地址解析协议）是一种网络协议，用于在局域网内将IP地址映射到MAC地址。在以太网中，设备通过广播ARP请求来查询目标IP地址对应的MAC地址，从而建立通信…...

编程日记 2025/5/16 22:06:31

大脑特训，自信 “满格”

编辑：念小艺在追求自信的漫漫长路上，诸多因素如同闪耀的星光，为人们指引着方向。保持良好的饮食习惯，让身体摄取充足且均衡的营养，为精神的饱满提供坚实后盾；持续投身于锻炼之中，在挥洒汗水的…...

编程日记 2025/5/16 21:48:22

如何备份和恢复 PostgreSQL 数据库？

对于数据库管理员和开发人员来说，在 PostgreSQL 中创建数据库副本是一项至关重要的任务。此过程对于测试、备份、数据分析等都是必不可少的。在本指南中，我们将深入研究创建 PostgreSQL 数据库副本的步骤，以确保数据完整性和系统性能。必要…...

编程日记 2025/5/14 3:14:12

逆向入门（6）汇编篇-外挂初体验

代码分析部分游戏里面还是体验了不少自己CV来的外挂的，自己编写的程序还是头一次体验，程序源码如下 void startAcctack() {printf("开始攻击\n");// 获取当前系统时间time_t now time(0); // 获取当前时间的时间戳struct tm *local_time …...

编程日记 2025/5/16 20:59:49

HTML——77.网页编码及乱码处理

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>网页编码及乱码处理</title></head><body><!-…...

编程日记 2025/5/16 10:34:17

（leetcode算法题）382. 链表随机节点

如果给你一个智能记录 k行内容的小笔记本，从一本你也不知道有多少行的 C Primer 中进行摘抄，你应该怎么做才能让抄写的时候能让书中的每一行都等概率的出现在小笔记本中？ 答：准备好一个公平的轮盘和一个巨大的摇奖机&#xff0c…...

编程日记 2025/5/12 22:08:09

Git 如何在IDEA中进行使用

1. 2. 3....

编程日记 2025/5/16 21:00:57

【Pytorch报错】AttributeError: cannot assign module before Module.init() call

代码： import torch.nn as nnclass Model(nn.Module):def __init__(self, input_dim, output_dim):self.linear nn.Linear(input_dim, output_dim) def forward(self, x):out self.linear(x)return outmodel Model(1, 1)报错： --------------------…...

编程日记 2025/5/16 20:17:55

深入理解计算机系统—虚拟内存（一）

一个系统中的进程是与其他进程共享 CPU 和主存资源的。然而，共享主存会形成特殊的挑战。随着对 CPU 需求的增长，进程以某种合理的平滑方式慢了下来。但是如果太多的进程需要太多的内存，那么它们中的一些就根本无法运行。为了更加有效地管理内…...

编程日记 2025/5/16 21:21:08

[Qt] 输入控件 | Line | Text | Combo | Spin | Date | Dial | Slider

目录输入类控件 1、Line Edit 录入个人信息使用正则表达式验证输入框的数据验证两次输入的密码一致切换显示密码 2、Text Edit 获取多行输入框的内容验证输入框的各种信号 3、Combo Box 使用下拉框模拟麦当劳点餐从文件中加载下拉框的选项 4、Spin Box 调整…...

编程日记 2025/5/16 14:59:25

【信息系统项目管理师】高分论文：论信息系统项目的风险管理（数字化联合审查管理系统）

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录论文一、全盘考虑，编制项目风险管理计划二、务实高效，做好项目的风险识别三、客观严谨，进行定性风险分析四、客观严谨，进行定量风险分析五、未雨绸缪，做好规划风险应对六、控制执行，实施风险应对七、做好…...

编程日记 2025/5/16 20:39:12

设计模式结构型外观模式（Facade Pattern）与常见技术框架应用解析

外观模式（Facade Pattern）是一种结构型设计模式，它的核心思想是将一个复杂的子系统封装在一个外观类中，为子系统提供一个统一的接口。通过这个接口，客户端可以简化对子系统的访问，而无需直接与子系统中的各…...

编程日记 2025/5/6 4:51:51

《learn_the_architecture_-_generic_interrupt_controller_v3_and_v4__lpisn》学习笔记

1.LPI（Locality-specific Peripheral Interrupts）是一种基于消息的中断（Message Signaled Interrupt，MSI），由中断翻译服务(ITS)提供翻译。这是因为LPI的设计目标是为系统中大量的设备提供高效的中断管理&am…...

编程日记 2025/5/14 19:57:53

java 常量池详解

目录 java 常量池详解一静态常量池（Static Constant Pool）1.1 概述1.2 存储内容1.3 特点1.4 示例二运行时常量池（Runtime Constant Pool）2.1 概述2.2 存储内容2.3 特点2.4 示例三基础类型常量池（Primitive Type C…...

编程日记 2025/5/16 21:57:07

aardio —— 虚表 —— 模拟属性框

写了个简单的属性框例程，抛砖引玉，期待你做出更丰富强大的功能。可折叠行、可输入文本、可下拉选择、支持下拉选择图片、颜色等功能。只有想不到，没有做不到，发挥你的想象力吧。 import win.ui; import godking.comboboxEx im…...

编程日记 2025/5/11 21:20:37

企业微信——智能表格学习

智能表格应用限制条件获取 token https://developer.work.weixin.qq.com/document/10013#%E5%BC%80%E5%8F%91%E6%AD%A5%E9%AA%A4 开发步骤你可以通过以下步骤，使用access_token来访问企业微信的接口。需要注意的是，所有的接口需使用Https协议、Js…...

编程日记 2025/5/11 13:05:09

2501d,jingo优化

原文大家好,我重构和优化了一下jin.go这里: 我去掉了vibe.d依赖,因为它又慢又大,而且我无法与2版本交朋友.当仅运行1000个vibe纤程时,不仅应用崩溃,甚至图形系统驱动也崩溃一次,这需要重启笔记本电脑. 当前,我用小栈大小的本地流(4kb)解决. 我真很期待photon的稳定性,以恢复支…...

编程日记 2025/5/16 6:11:12

实景三维点云处理专业软件ArcGIS根据DSM生成地表点云集

常见的实景三维处理软件及其特色功能如下： 一、专业实景三维建模软件 Agisoft Metashape 高精度建模：能够生成高精度的三维模型，精度可以达到厘米级甚至毫米级，适用于需要详细测量和分析的项目，如文物保护和建筑测量。…...

编程日记 2025/5/16 21:47:07

山东大学人工智能导论期末复习概念汇总

人工智能概念汇总V2 —Nevertheless 简介 [!NOTE] 本文是在原版的基础上，面向期末而进行的删减版本建议使用pdf版本，排版和图片显示完全。如有需要，可私信发送邮箱地址 PDF版本： 山东大学人工智能导论概念汇总pdf版山东大学软…...

编程日记 2025/5/16 22:41:17

Ubuntu下安装Android Sdk

下载android sdk命令行工具 https://developer.android.com/studio?hlzh-cn#command-tools mkdir android-sdk cd android-sdk unzip commandlinetools-linux-11076708_latest.zip 添加环境变量到~/.bashrc export ANDROID_HOME$HOME/android-sdk export PATH$PATH:$ANDRO…...

编程日记 2025/5/16 22:37:36

c语言中GHashTable的使用

前言:最近在c代码中需要用到键值对的存储，由于没有map，需要自己实现或者使用库函数，g_hash_table_new是GLib中的库函数，但使用起来会有很多坑，记录一下构建hash表g_hash_table_new GHashTable* g_hash_table_new(GH…...

编程日记 2025/5/15 2:50:39

Conda清理缓存

参考：1、2...

编程日记 2025/5/16 21:45:19

【每日学点鸿蒙知识】导入cardEmulation、自定义装饰器、CallState状态码顺序、kv配置、签名文件配置

1、HarmonyOS 无法导入cardEmulation？ 在工程entry mudule里的index.ets文件里导入cardEmulation失败可以按照下面方式添加SystemCapability；在src/main/syscap.json(此文件需要手动创建）中添加如下内容 {"devices": {"gen…...

编程日记 2025/5/16 21:03:29

【从零开始入门unity游戏开发之——C#篇42】C#补充知识——随机数（Random）、多种方法实现string字符串拼接、语句的简写

文章目录一、随机数1、Random.Next()生成随机整数示例：生成一个随机整数生成指定范围内的随机整数 2、Random.NextSingle生成随机浮点数示例：生成随机浮点数 3、生成随机字母或字符示例：生成随机字母示例：生成随机小写字母二、…...

编程日记 2025/5/16 22:24:39

深入解析 Conda 安装的默认依赖包及其作用：conda create安装了哪些包（中英双语）

深入解析 Conda 安装的默认依赖包及其作用当我们使用 Conda 创建新环境时，例如执行命令： conda create -n olmes python3.10Conda 会自动为我们安装一系列基础依赖包，保证 Python 环境能够正常运行。这些包不仅是我们开发的基础工具&#…...

编程日记 2025/5/16 20:23:01

《Vue3实战教程》35：Vue3测试

如果您有疑问，请观看视频教程《Vue3实战教程》测试为什么需要测试自动化测试能够预防无意引入的 bug，并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。与任何应用一…...

编程日记 2025/5/16 8:51:22

Mysql监视器搭建

Mysql监视器搭建资源下载在：Mysql监视器资源包查询问题：CPU、连接数、慢查询 --> 暴增 1、exporter进行Mysql信息采集修改my.cnf [client] userroot password数据库密码 host:数据库URL port3306启动命令 mysqld_exporter.exe --config.my-c…...

编程日记 2025/5/16 6:54:30

Linux(centos)安装 MySQL 8 数据库(图文详细教程)

前言前几天写了个window系统下安装Mysql的博客，收到很多小伙伴私信需要Linux下安装Mysql的教程，今天这边和大家分享一下，话不多说，看教程。一、删除以前安装的MySQL服务一般安装程序第一步都需要清除之前的安装痕迹&#xff…...

编程日记 2025/5/9 11:02:03

软件工程大作业——图书管理系统/图书个性化推荐与实现系统

目录 1 绪论 1.1研究背景 1.2研究现状 1.3研究内容 2 系统关键技术 2.1 Spring Boot框架 2.2 JAVA技术 2.3 MYSQL数据库 2.4 B/S结构 3 系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2经济可行性 3.1.3操作可行性 3.2 系统性能分析 3.3 系统功能分析 3.4系统流程分析 3.4.1登…...

编程日记 2025/5/8 11:15:38

Linux下编译安装PETSc

本文记录在Linux下编译安装PETSc的流程。零、环境操作系统Ubuntu 22.04.4 LTSVS Code1.92.1Git2.34.1GCC11.4.0CMake3.22.1oneAPI2024.2.1 一、安装依赖 1.1 安装oneAPI 参见：Get the Intel oneAPI Base Toolkit , Get the Intel oneAPI HPC Toolkit 1.2 安…...

编程日记 2025/5/15 21:52:43

检索增强生成

概述检索增强生成（Retrieval-Augmented Generation，RAG）是一种将信息检索与语言模型相结合的技术。由Facebook AI Research于2020年提出，它把数据库的优势与语言模型的优势相结合。它能让模型从外部知识库中检索信息&#xff0c…...

编程日记 2025/5/14 8:17:12

九、Vue 事件处理器

文章目录前言一、基础事件绑定：v-on 指令二、方法调用：组织有序的交互逻辑三、事件修饰符阻止冒泡与默认事件捕获与自身触发单次触发与鼠标按键区分四、按键修饰符前言在 Vue.js 的交互世界里，事件处理器起着举足轻重的作用，它让页面从静态展示迈向动态交互，精准捕捉用户…...

编程日记 2025/5/11 2:10:23

stm32内部flash在线读写操作

stm32内部flash在线读写操作 📍相关开源库文章介绍《STM32 利用FlashDB库实现在线扇区数据管理不丢失》 ✨不同系列，内部flash编程有所区别。例如stm32f1是按照页擦除，半字（16bit）或全字(32bit)数据写入；st…...

编程日记 2025/5/15 10:13:20

DuckDB：密钥管理器及其应用

密钥管理器(Secrets Manager)为所有使用密钥的后端提供了统一的用户界面。密钥信息可以被限定范围，因此不同的存储前缀可以有不同的密钥信息，例如允许在单个查询中连接跨组织的数据。密钥也可以持久化，这样就不需要在每次启动DuckDB时都指定它…...

编程日记 2025/5/16 12:53:11

每日一学——自动化工具（Ansible）

3.1 Ansible 3.1.1 Playbook编写指南嘿，小伙伴们！你们知道吗，运维工作其实也可以变得像搭积木一样简单！今天我们要介绍的就是Ansible，一款非常流行的自动化运维工具。通过Ansible，我们可以用Playbook来描…...

编程日记 2025/5/11 21:36:32

typescripts语法笔记

游戏引擎：图形渲染系统，特效系统，物理系统，各个功能集合。 cocoscreator是将cocos2d-x封装成了可视化编辑。面向对象转变成面向组件开发。 ts编程是js编程语言的超集。基础类型""可以转换成字符串类型，适用…...

编程日记 2025/5/12 4:22:32

TypyScript从入门到精通

TypyScript从入门到精通 TypyScript 是什么？增加了什么环境搭建二、为何需要 TypeScript三、编译 TypeScript四、类型声明五、类型推断基本类型六、类型总览JavaScript 中的数据类型TypeScript 中的数据类型1. 上述所有 JavaScript 类型2. 六个新类型：3.…...

编程日记 2025/5/15 17:33:32