HTML5 五彩圓環Loading加載動畫實現教程

今天我們要來介紹一款效果很特別的HTML5 Loading加載動畫，不像其他的Loading動畫，這款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動畫還不錯吧。

另外還有幾個不錯的Loading動畫推薦一下，像這款類似發動機效果的純CSS3 Loading動畫和這款基於jQuery的自定義Loading動畫都非常不錯。最后提供一下這款HTML5 五彩Loading的源代碼：源代碼下載>>