侧边栏壁纸
博主头像
xuesheng博主等级

分享web知识,学习就是取悦自己!

  • 累计撰写 118 篇文章
  • 累计创建 14 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录

CSS3 loading三圆点加载动画

xuesheng
2018-08-16 / 0 评论 / 0 点赞 / 303 阅读 / 985 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-01-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

three-dots.css是一款CSS3 loading三圆点加载动画特效库。three-dots.css中集成了14种三圆点loading动画特效,以及三种增强动画效果。

演示地址

github地址

安装

可以通过npm来安装three-dots.css。

npm install three-dots --save

使用方法

在页面中引入three-dots.css。

<link href="css/three-dots.css" rel="stylesheet">

HTML结构
然后在你需要添加Loading效果的容器上添加相应的class类即可。

<div class="dot-elastic"></div>
 
<div class="dot-pulse"></div>
 
<div class="dot-flashing"></div>
 
<div class="dot-collision"></div>
 
<div class="dot-revolution"></div>
 
<div class="dot-translation"></div>
 
<div class="dot-typing"></div>
 
<div class="dot-windmill"></div>
 
<div class="dot-bricks"></div>
 
<div class="dot-floating"></div>

可用的class类有:

dot-elastic
dot-pulse
dot-flashing
dot-collision
dot-revolution
dot-carousel
dot-typing
dot-windmill
dot-bricks
dot-floating
dot-fire
dot-spin
dot-falling
dot-stretching

0

评论区