学习
实践
活动
专区
工具
TVP
写文章
专栏首页前端皮小蛋分享一个动画制作网站

分享一个动画制作网站

cat

今天看到一个不错的动画网站:

https://lottiefiles.com/

可以自己编辑生成动画,并且能十分方便的引入到你的项目中。

比如上图的猫咪动画:

import Lottie from "react-lottie";
import * as catData from "./cat.json";

const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: catData.default,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice"
  }
};

//...
<Lottie options={defaultOptions} height={120} width={120} />

借用这个能力, 我们可以让 loading 效果更有趣味:

加载完毕的动画

<FadeIn>
  <div class="d-flex justify-content-center align-items-center">
    <h1>fetching pizza</h1>
    <Lottie options={defaultOptions} height={120} width={120} />                      
  </div>
</FadeIn>

带有动画的列表

网站中还有大量的素材可以免费使用:

素材样例

另外, 编辑之后的json文件,也可以托管起来,直接在代码中引入, 十分方便:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json" mode="bounce" background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

还有游戏模式供你把玩, 十分有意思:

感兴趣的可以去看一下 :)

文章分享自微信公众号:
前端皮小蛋

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:南山皮小蛋
原始发表时间:2021-04-13
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 常用的做网站软件、网站制作软件分享

    网站制作中用到的软件很多,针对前端开发人员的有Dreamweaver,图片软件有Firework和photoshop,正对后端的开发软件更多,不同的开发语言用到...

    用户4831957
  • 分享-目前免费-简历在线制作网站

    在找工作的时候,一个不错的简历是一个不错敲门砖,但是很多简历模板下载收费有的且不好看,这篇分享的网站,是在线编辑简历且支持三种格式下载(图片,PDF,Word)...

    用户9006224
  • 论如何制作一个网站(非静态)

    在初三的寒假,我在各位大佬的帮助下,建立了一个静态的网站(www.gaoice.cf)(但没过几天因为开学面临这中考备考的任务,没时间管理),不过我并不知足,因...

    冰漪叶
  • 网站制作教程:新手如何用PageAdmin建立一个网站

    PageAdmin是国内很知名的建站系统,国内超过30%的网站都是由PageAdmin搭建而成,现在很多公司或单位都没有自己的独立网站,利于pageadmin建...

    用户4831957
  • 分享一个免费Api小网站

    用户9006224
  • 网站制作费用明细,建一个网站需要多少钱

    很多公司都想做企业网站,为了更好地宣传自己的产品和服务,同时也可以让用户更方便地了解自己的企业,但在建立一个网站时,我们会考虑成本方面的问题。网站制作需要多少钱...

    用户4831957
  • pageadmin CMS网站制作教程:实例:如何制作一个报名表?

    pageadmin CMS网站建设教程:实例:如何制作一个报名表? 有时我们根据需求需要制作一些自定义表,该如何去制作呢?

    Almost Lover
  • 分享 13 个可以在线制作 360 度全景视图的网站

    英文 | https://niemvuilaptrinh.medium.com/14-libraries-create-360-degree-views-for...

    前端达人
  • 分享一个下载系统镜像的网站

    用户9006224
  • 分享一个有趣的域名注册网站

    百度趣域网 什么后缀都有 比如rmn.sb 等等等 链接https://www.quyu.net 或者直接百度搜趣域网

    星泽V社
  • 分享一个免费托管静态资源的网站

    前几天有个同事分享了一个免费的静态资源托管网站http://surge.sh,非常的好用,好东西怎么能独自使用呢,今天就分享给大家,在使用之前先要全局安装一个n...

    挥刀北上
  • 分享一个爬取网站的小技巧

    你也许听说过,抓取手机 App 端数据就需要搭建手机抓包环境。那么我们就要屁颠屁颠去抓包搭建?哈哈,显然不用。我给大家分享一个小技巧,可以节省搭建环境的时间。

    sergiojune
  • 分享一个爬取网站的小技巧

    有时候,我们很想爬取一个网站的数据。如果 PC 端的网页的反爬机制太强,我们可以换个思路。现在很多网站为了满足手机浏览器能正常访问的需求,都会推出手机版的网页。...

    猴哥yuri
  • 分享一个python制作的镶嵌画工具-Tiler

    打算将它们封装成模块,找素材时,github发现一个纯python做的镶嵌画的工具,没有用任何机器学习的代码。(看时间很早就有了,发现的有点晚)

    叶子陪你玩
  • 如何利用kali制作一个“钓鱼”网站,以及如何识别

    尽管当今互联网的安全措施已经很完善,但是还是会出现“被盗号”的情况,很多情况下是“有心人”的钓鱼网站导致的,今天的文章主要讲一下kali下使用setoolkit...

    知识与交流
  • 用Python轻松制作一个股票K线图网站

    在前面的文章中,我们学习了如何使用 Tkinter 构建股票数据抓取以及展示K线图功能,虽然大致的功能已经具备,但是在当今这个人手一个 Web 服务的年代,GU...

    周萝卜
  • 分享一个免费SSL证书申请网站,给网站开启https协议

    这些天,由于公司的业务需求,接触到了 ssl 证书和 https 协议。博客前几篇文章也分享了在 WEB 服务器上安装 SSL 证书,为网站开启 https 协...

    张戈

作者介绍

皮小蛋

Shopee前端工程师

Shopee · 前端工程师 (已认证)

专栏

精选专题

活动推荐

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券