10個樣式各異的CSS3 Loading加載動畫

前幾天我在園子里分享過2款很酷的CSS3 Loading加載動畫，今天又有10個最新的Loading動畫分享給大家，這些動畫的樣式都不一樣，實現起來也並不難，你很容易把它們應用在項目中，先來看看效果圖：

你也可以在這里查看DEMO演示。

下面我們來挑選幾個比較典型的案例來分析一下代碼。

先來看看第一個案例，是條狀動畫，HTML代碼如下：

<div id="caseVerte">  
  <div id="case1"></div>
  <div id="case2"></div>
  <div id="case3"></div>
  <div id="case4"></div>
  <div id="case5"></div>
  <div id="case6"></div>
  <div id="load">
  <p>loading ...</p>
  </div>
</div>

CSS代碼如下：

#caseVerte {
  background-color : #30bf82;
  height : 140px;
  width : 150px;
  padding-top : 10px;
  float :left;
}
#caseVerte #load {
  color : #fbfbfb;
  font-family : calibri;
  text-align : center;
}
#caseVerte #case1 {
  height  : 10px;
  width : 100px;
  background-color : #fbfbfb;
  animation : case1 2.25s infinite;
  -webkit-animation : case1 2.25s infinite;
}
#caseVerte #case2 {
  height : 10px;
  width : 10px;
  background-color : #fbfbfb;
  animation : case2 2s infinite;
  -webkit-animation : case2 2s infinite;
}
#caseVerte #case3 {
  height : 10px;
  width : 10px;
  background-color : #fbfbfb;
  animation : case3 1.75s infinite;
  -webkit-animation : case3 1.75s infinite;
}
#caseVerte #case4 {
  height : 10px;
  width : 10px;
  background-color : #fbfbfb;
  animation : case3 2.5s infinite;
  -webkit-animation : case3 2.5s infinite;
}
#caseVerte #case5 {
  height : 10px;
  width : 10px;
  background-color : #fbfbfb;
  animation : case3 1.5s infinite;
  -webkit-animation : case3 1.5s infinite;
}
#caseBleu #case6 {
  height : 10px;
  width : 10px;
  background-color : #0086a6;
  animation : case3 5s infinite;
  -webkit-animation : case3 5s infinite;
}

再來看看第五個漸變的圈圈，HTML代碼：

<div id="caseViolette">
  <div id="cercle">
     <div id="cercleCache"></div>
  </div>
  <div id="load">
    <p>loading</p>
  </div>
  <div id="point"></div>
</div>

CSS代碼如下：

#caseViolette {
  background-color : #592780;
  height : 140px;
  width : 150px;
  padding-top : 10px;
  float : left;
  position : relative;
}
#caseViolette #load {
  color : #D8A6FF;
  font-family : calibri;
  text-align : center;
  margin-top : 100px;
}
#cercle {
  height : 50px;
  width : 50px;
  position : absolute;
  top : 45px;
  left : 45px;
  border-radius : 50%;
  background : linear-gradient(#D8A6FF,#FFECEE);
  animation : turnCercle 2s infinite;
  -webkit-animation : turnCercle 5s infinite;
  animation-timing-function : ease-in-out;
  -webkit-animation-timing-function : ease-in-out;
}

@-webkit-keyframes turnCercle {
  0% {-webkit-transform : rotate(0deg);}
  100% {-webkit-transform : rotate(10080deg);}
}

@keyframes turnCercle {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(10080deg);}
}

#cercleCache {
  height : 40px;
  width : 40px;
  position : absolute;
  border-radius : 50%;
  background-color : #592780;
  z-index : 5;
}

最后再來看倒數第三個，三個圈圈漸隱漸現的動畫，HTML代碼如下：

<div id="caseVerteClaire">
  <div id="transform">
    <div id="transform1"></div>
    <div id="transform2"></div>
    <div id="transform3"></div>
  </div>
   <div id="load">
    <p>loading</p>
  </div>
</div>

CSS代碼如下：

#caseVerteClaire {
  background-color : #C9F76F;
  height : 140px;
  width : 150px;
  padding-top : 10px;
  float : left;
  position : relative;
}
#caseVerteClaire #load {
  color : #444444;
  font-family : calibri;
  text-align : center;
  position : absolute;
  top : 42px;
  left :42px;
}
#tranform {
  position : absolute;
  top : 85px;
  left : 30px;
}

#transform1 {
  height : 30px;
  width : 30px;
  border-radius : 50%; 
  background-color : #444444;
  position : absolute;
  top : 85px;
  left : 15px;
  opacity : 0;
  animation : transform 4s infinite;
  -webkit-animation : transform 4s infinite;
}

#transform2 {
  height : 30px;
  width : 30px;
  border-radius : 50%; 
  background-color : #444444;
  position : absolute;
  top : 85px;
  left : 54px;
  opacity : 0;
  animation : transform 4s infinite;
  -webkit-animation : transform 4s infinite;
  animation-delay : 0.5s;
  -webkit-animation-delay : 0.5s;
}

#transform3 {
  height : 30px;
  width : 30px;
  border-radius : 50%; 
  background-color : #444444;
  position : absolute;
  top : 85px;
  left : 94px;
  opacity : 0;
  animation : transform 4s infinite;
  -webkit-animation : transform 4s infinite;
  animation-delay : 1s;
  -webkit-animation-delay : 1s;
}

@-webkit-keyframes transform {
  0% {opacity : 0;}
  25% {opacity : 1;}
  50% {opacity : 0;}
  75% {opacity : 1;}
  100% {opacity : 0;}
}

@keyframes transform {
  0% {border-radius : 0px; opacity : 0;}
  20% {border-radius : 0px; opacity : 1;}
  40% {border-radius : 0px; opacity : 0;}
  60% {border-radius : 50%; opacity : 0;}
  80% {border-radius : 50%; opacity : 1;}
  100% {border-radius : 50%; opacity : 0;}
}

其他案例的CSS代碼也都類似，我已經將源代碼上傳到園子里了，大家可以下載。下載地址>>