当前访客身份:游客 [ 登录  | 注册加入尚学堂]
启用新域名sxt.cn
新闻资讯

HTML5 五彩圆环Loading加载动画实现教程

helloworld 发表于 2年前  | 评论(0 )| 阅读次数(1047 )|   0 人收藏此文章,   我要收藏

今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈的时候还有淡入淡出的效果。每一个圆环不停地旋转,从而实现加载动画的效果。首先你可以看看效果演示:

css3-circle-loading

 

下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码。

首先是HTML代码,只定义一个Loading容器,非常简单。

HTML代码:

<div id=”hold”></div>

接下来是CSS代码,主要是定义每一个圆圈的动画效果:

CSS代码:

 
@-webkit-keyframes spin { from {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  } to { -webkit-transform: rotate(0deg); transform: rotate(0deg);
  } }

@keyframes spin { from {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  } to { -webkit-transform: rotate(0deg); transform: rotate(0deg);
  } }
@-webkit-keyframes osc { 0% {
    -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0;
  } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1;
  } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0;
  } }
@keyframes osc { 0% {
    -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0;
  } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1;
  } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0;
  } }
@-webkit-keyframes rainbow { 0% {
    background: #df2020;
  } 25% { background: #80df20;
  } 50% { background: #20dfdf;
  } 75% { background: #7f20df;
  } 100% { background: #df2020;
  } }
@keyframes rainbow { 0% {
    background: #df2020;
  } 25% { background: #80df20;
  } 50% { background: #20dfdf;
  } 75% { background: #7f20df;
  } 100% { background: #df2020;
  } }



最后调用JS实现Loading动画的圆圈不停地转动,并且使圆圈的颜色发生周期性的渐变。

JS代码如下:

 
var num = 7,
    ang = 360/num,
    rad = num*5; function setup(){ for(var i=0; i<num; i++){ var button = document.createElement('div');
    button.className = "dot"+i+" dot";
    button.style.top = rad*Math.cos(ang*i*Math.PI/180)-10+"px";
    button.style.left = rad*Math.sin(ang*i*Math.PI/180)-10+"px";
    button.style.backgroundColor = "hsla("+ang*i+", 50%, 50%, 1)";

    button.style.webkitAnimation = 
      "osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s";
    button.style.animation = 
      "osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s, spin 1s infinite";

    document.getElementById("hold").appendChild(button);
  }
}



怎么样,这款HTML5 Loading动画还不错吧。

代码下载地址:

链接: http://pan.baidu.com/s/1jGDoXYu 密码: 34ah

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183