53

CSS3 loading三圆点加载动画特效

 5 years ago
source link: https://www.helloweba.net/javascript/565.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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类即可。

<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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK