CSS3 loading三圆点加载动画特效

栏目: CSS3 · 发布时间: 7年前

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

社交红利

社交红利

徐志斌 / 北京联合出版公司 / 2013-8 / 42

如今的互联网,社交网络已占据了主要的位置。如腾讯微博、微信、QQ空间、人人网、新浪微博、唱吧、美丽说、啪啪等等,都可以算是社交网络,将大部分活跃的人们聚集起来,通过文字、图片、语音等形式分享着身边的事。这些社交网络吸引着更多兴趣相投的陌生人成为朋友结成圈子,也衍生出的海量流量和机会,为业界和创业者提供着源源不绝的新机会。可以这样说,社交网络在将散落在人们中的需求汇聚起来,等待着企业来提供服务。因此......一起来看看 《社交红利》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具