现在的位置: 首页 > web前端 > 正文

CSS3loading三圆点加载动画特效

2020年02月12日 web前端 ⁄ 共 810字 ⁄ 字号 评论关闭

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

安装

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

npm install three-dots --save

使用方法

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

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

HTML结构

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

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

可用的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

    该CSS3 loading三圆点加载动画特效的github地址为:https://github.com/nzbin/three-dots

    以上就上有关CSS3loading三圆点加载动画特效的相关介绍,要了解更多CSS3,HTML5内容请登录学步园。

抱歉!评论已关闭.