明日我们要来介绍一款功用很越发的HTML5
Loading加载动画,不像其余的Loading动画,那款Loading动画颜色很充分,并且在转圈的时候还有淡入淡出的效益。每二个圆环不停地打转,从而达成加载动画的法力。首先你能够看看效果演示:

jQuery 1

您也足以在此处查看在线演示

上面分享一下那款HTML5
Loading动画的贯彻进程,重就算HTML代码和CSS3代码,以及初阶化的JS代码。

率先是HTML代码,只定义2个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动画还能够啊。

除此以外还有多少个不利的Loading动画推荐一下,像那款类似斯特林发动机效果的纯CSS3
Loading动画
和那款基于jQuery的自定义Loading动画都不行不易。最终提供一下那款HTML5
五彩Loading的源代码:源代码下载>>

相关文章

网站地图xml地图