前端-动画库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. Create, edit, test, collaborate, and ship Lottie animations in no time!icon-default.png?t=O83Ahttps://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语言

按照所给的代码引入即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Ubuntu 18.04.6 LTS安装OpenFace流程

一、修改配置:将gcc8&#xff0c;g8作为默认选项 sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-8 100 sudo update-alternatives --config gcc 选择版本&#xff0c;再查看gcc --version sudo update-alternatives --install /usr/bin/g g /usr/bin/g-…

Cauchy-Schwarz不等式:向量内积的“上限卫士”,帮你衡量向量有多“同向”

【有作图代码】Cauchy-Schwarz不等式&#xff1a;向量内积的“上限卫士”&#xff0c;帮你衡量向量有多“同向” 关键词&#xff1a; #柯西-施瓦茨不等式 Cauchy-Schwarz Inequality #向量内积 Vector Dot Product #向量范数 Vector Norm #向量夹角 Angle Between Vectors #不…

比较 FreeSWITCH 的 asr 事件和回调函数

用 lua 来描述&#xff0c;是这样的 第一种做法&#xff1a; session:setVariable("fire_asr_events", "true") session:execute("detect_speech", "start-input-timers") 识别到结果之后可以收到 DETECTED_SPEECH 事件 另外一个做法…

Flink源码解析之:如何根据JobGraph生成ExecutionGraph

Flink源码解析之&#xff1a;如何根据JobGraph生成ExecutionGraph 在上一篇Flink源码解析中&#xff0c;我们介绍了Flink如何根据StreamGraph生成JobGraph的流程&#xff0c;并着重分析了其算子链的合并过程和JobGraph的构造流程。 对于StreamGraph和JobGraph的生成来说&…

Spring Boot 中的 classpath详解

Spring Boot 中的 classpath 详解 在开发 Spring Boot 应用时&#xff0c;理解 classpath 的概念对于配置、资源管理以及构建项目非常重要。特别是当我们使用 Maven 打包工具时&#xff0c;项目的资源文件在不同的阶段会被放置到不同的目录。本文将深入探讨 Spring Boot 中的 …

数据结构之串

数据结构之串&#xff08;String&#xff09; 数据结构之串&#xff08;String&#xff09;1. 串的定义2. 串的存储结构2.1 顺序存储2.2 链式存储2.3 索引存储 3. 串的常见操作3.1 基本操作3.1.1 创建串3.1.2 求串长度3.1.3 串连接3.1.4 串比较3.1.5 串拷贝 3.2 高级操作3.2.1 …

生成式AI与RAG架构:如何选择合适的向量数据库?

大规模语言模型和情境感知的AI应用程序推动了检索增强生成&#xff08;RAG&#xff09;架构的发展&#xff0c;使其成为关注的焦点。RAG将生成模型的力量与外部知识相结合&#xff0c;允许系统生成更加具体且与情境相关的回应。 向量数据库构成了RAG系统的基石。选择正确的向量…

hive on spark报错解决(基于hive-3.1.3和spark-2.3.0)

相关配置可参考&#xff1a;https://blog.csdn.net/weixin_46389691/article/details/134126254 原作者&#xff1a;月亮给我抄代码 他写的很详细 ERROR : Job failed with java.lang.IllegalAccessError: tried to access method com.google.common.base.Stopwatch.<init&…

电脑找不到mfc110.dll文件要如何解决?Windows缺失mfc110.dll文件快速解决方法

一、mfc110.dll文件的重要性 mfc110.dll&#xff0c;全称Microsoft Foundation Class Library 110&#xff0c;是Microsoft Visual C Redistributable for Visual Studio 2012的一部分。这个动态链接库&#xff08;DLL&#xff09;文件对于支持基于MFC&#xff08;Microsoft F…

大模型Weekly 03|OpenAI o3发布;DeepSeek-V3上线即开源!

大模型Weekly 03&#xff5c;OpenAI o3发布&#xff1b;DeepSeek-V3上线即开源&#xff01;DeepSeek-V3上线即开源&#xff1b;OpenAI 发布高级推理模型 o3https://mp.weixin.qq.com/s/9qU_zzIv9ibFdJZ5cTocOw?token47960959&langzh_CN 「青稞大模型Weekly」&#xff0c;持…

4、上一个接口返回值,作为下一个方法(接口)的变量

import requestsclass TestCase:# 设置1个类变量B "初始值"def test1(self):url "**这里是接口url**"params {"type": "json"}resp1 requests.get(urlurl, paramsparams)# .json()用于将服务器返回的 JSON 格式的响应内容解析为 P…

USB 中断传输的 PID 序列

中断传输的 PID 序列 端点在初始化后&#xff0c;从 DATA0 开始&#xff0c;每成功执行一个事务&#xff0c;数据包序列翻转一次&#xff08;从 DATA0 变为DATA1 或从 DATA1 变为 DATA0)。 数据翻转和传输的个数没有直接关系&#xff0c;只由端点在初始化后处理的总数决定。 …

SAP财务凭证的更改、冲销的方式

文章目录 一、财务凭证更改二、财务凭证冲销 【SAP系统研究】 #SAP #FICO #SAP财务 一、财务凭证更改 &#xff08;1&#xff09;已经过账的财务凭证 FB02&#xff1a;过完帐的允许更改的地方有限&#xff0c;只有凭证抬头文本、参照、分配、文本、原因代码等。 &#xff0…

OpenCV的人脸检测模型FaceDetectorYN

OpenCV的人脸检测模型FaceDetectorYN 1. 官网地址2. 如何使用2.1.到opencv_zoo下载模型文件和代码2.2. 下载文件展示2.3. 修改了demo支持读取视频文件&#xff0c;默认是图片和摄像头## 2.4 效果展示 1. 官网地址 https://docs.opencv.org/4.x/df/d20/classcv_1_1FaceDetector…

服务端错误的处理和web安全检测

文章目录 I 服务端错误的处理业务返回码处理前端处理业务返回码nginx处理http状态码II web安全检测区分服务器类型主机扫漏III 使用 micro_httpd 搭建一个PHP站点步骤下载micro_httpd 并安装它配置micro_httpd 来服务PHP文件I 服务端错误的处理 服务端发生错误时,返回给前端的…

vue使用el-select下拉框自定义复选框

在 Vue 开发中&#xff0c;高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。 一、代码功能概述 这段代码创建了一个可多选的下拉框组件&#xff0c;通过el-select和el-checkbox-group结合的方…

Elasticsearch DSL版

文章目录 1.索引库操作创建索引库&#xff1a;删除索引库&#xff1a;查询索引库&#xff1a;修改索引库&#xff1a;总结 2.文档操作创建文档&#xff1a;查询文档&#xff1a;删除文档&#xff1a;全量修改文档&#xff1a;增量修改文档&#xff1a;总结 3.DSL查询语法&#…

Python性能分析深度解析:从`cProfile`到`line_profiler`的优化之路

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在软件开发过程中,性能优化是提升应用质量和用户体验的关键环节。Python作为广泛应用的高级编程语言,其性能分析工具为开发者提供了强大的…

01-英语准备

首先是自我介绍&#xff0c;中英文都可以&#xff0c;建议提前打好草稿然后开始背&#xff0c;模板网上有很多&#xff0c;可以自行查找&#xff0c;主要就是个人的一些基本情况&#xff0c;竞赛获奖经历&#xff0c;感兴趣的方向等等。接下来就是老师问的一些问题了。 做个英文…

亚信科技研发智能化实践之路

作者&#xff1a;亚信科技高级研发经理史伟星 亚信科技是一家专注于 To B 业务的公司。公司 1993 年成立&#xff0c;于 2000 年成为纳斯达克首批上市的高科技企业。2010 年&#xff0c;通过持续深耕&#xff0c;成为中国领先的通信软件产品服务商。2014 年&#xff0c;完成私…