簡單的CSS3 Loading動畫

　　最終效果如圖一，gif圖片稍微有點卡頓，事實上代碼在瀏覽器裏執行得很流暢。這裏面用到的css3技術很是簡單，分別是border-radius、僞元素、css3關鍵幀以及animation動畫。

 

　　首先整理一下大概的思路：整個圓分爲AB兩部分，左右都是半圓，上面蓋了一個背景色爲白色的小圓，如右圖，簡單佈局以下：

　　

<style>
  .loading{margin:100px auto; width: 8em; height: 8em; position: relative;}
  .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center;
  }
  .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;}
  .left{ border-radius: 8em 0 0 8em;}
  .right{ border-radius: 0 8em 8em 0;}
  .left:after,.right:after{content:"";  position:absolute; display:block; width: 4em;height: 8em; background-color: white;border-radius: 8em 0 0 8em;background-color: red;}
  .right:after{content:"";  position:absolute; display:block;   border-radius: 0 8em 8em 0; }
</style>
<div class="loading">
  <div class="left"></div>
  <div class="right"></div>
  <div class="progress">85%</div>
</div>

View Code

 

　　佈局使用了僞元素，很容易看懂就不解釋了，整個動畫過程分爲4步：　　　　　　　　

　　第1步，開始紅色部分是隱藏的（相對於圖中的位置以圓心爲中心點旋轉180度），B以圓心爲中心點旋轉後出如今視野裏，直到旋轉度數達到180度；

　　第2步：此時B靜止不動，A開始旋轉到180度，在視覺上看起來就像是B繼續在旋轉；

　　第3步：此時整個圓都出如今用戶視野，就如圖二的樣子，要使loading動畫循環播放，此時應該讓B繼續旋轉到360度，A靜止不動；

　　第4步：第3步執行完以後，B消失在用戶視野並靜止不動，A繼續旋轉到360度即回到原點完成一個回合。

　　用示意圖表示以下：

　　

　　爲了便於計算，假設一個回合的時間爲4s，每一步用時1s鍾，每一步佔整個動畫的25%，總結起來就是：

　　0%—25%：B旋轉到180deg

　　25%—50%：B靜止，A旋轉到180deg

　　50%—75%：A靜止，B繼續旋轉到360deg回到原點

　　75%—100%：B靜止，A繼續旋轉到360deg回到原點結束一個回合

　　用關鍵幀表示以下：

　　

  // B執行的關鍵幀
  @-webkit-keyframes rotateB{
    25%,50%{transform:rotateZ(180deg);}
    75%,100%{transform:rotateZ(360deg);}
  }
  // A執行的關鍵幀
  @-webkit-keyframes rotateA{
    0%,25%{transform:rotateZ(0deg);}
    50%,75%{transform:rotateZ(180deg);}
    100%{transform:rotateZ(360deg);}
  }

　　重點就是這個關鍵幀，最後，附上整個demo

　　

<style>
  .loading{margin:100px auto; width: 8em; height: 8em; position: relative;}
  .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center;
  }
  .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;}
  .left{ border-radius: 8em 0 0 8em;}
  .right{ border-radius: 0 8em 8em 0;}
  .left:after,.right:after{content:"";  position:absolute; display:block; width: 4em;height: 8em; background-color: white;border-radius: 8em 0 0 8em;background-color: red;}
  .right:after{content:"";  position:absolute; display:block;   border-radius: 0 8em 8em 0; }
  @-webkit-keyframes rotateB{
    25%,50%{transform:rotateZ(180deg);}
    75%,100%{transform:rotateZ(360deg);}
  }
  @-webkit-keyframes rotateA{
    0%,25%{transform:rotateZ(0deg);}
    50%,75%{transform:rotateZ(180deg);}
    100%{transform:rotateZ(360deg);}
  }
  .left:after{-webkit-animation:rotateA 2s infinite linear; transform-origin:right center;  }
  .right:after{-webkit-animation:rotateB 2s infinite linear; transform-origin:left center;}
</style>
<div class="loading">
  <div class="left"></div>
  <div class="right"></div>
  <div class="progress">85%</div>
</div>

View Code

 5月11日更新：

附上一個用到這個知識點作的時鐘，demo：

源碼：

<style>
  *{margin: 0; padding: 0;}
  .loading{margin:100px auto; width: 25em; height: 8em; position: relative;}
  .clock{position: relative; width: 8em; height: 8em; display: inline-block;}
  .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center;
  }
  .progress span{ font: 50px/2em Arial;}
  .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;}
  .left{ border-radius: 8em 0 0 8em;}
  .right{ border-radius: 0 8em 8em 0;}
  .left div,.right div{content:"";  position:absolute; display:block; width: 4em;height: 8em; background-color: white;border-radius: 8em 0 0 8em; transition:all .3s; transform-origin:right center; transform:rotateZ(-180deg);}
  .right div{content:"";  position:absolute; display:block;   border-radius: 0 8em 8em 0;transform-origin:left center; }
  .clock:nth-child(1) .left div,.clock:nth-child(1) .right div{
    background-color: red;
  }
  .clock:nth-child(2) .left div,.clock:nth-child(2) .right div{
    background-color: green;
  }
  .clock:nth-child(3) .left div,.clock:nth-child(3) .right div{
    background-color: blue;
  }
</style>
<div class="loading">
  <div class="clock hours">    
    <div class="left"><div></div></div>
    <div class="right"><div></div></div>
    <div class="progress"><span>0</span></div>
  </div>
  <div class="clock minutes">    
    <div class="left"><div></div></div>
    <div class="right"><div></div></div>
    <div class="progress"><span>0</span></div>
  </div>
  <div class="clock seconds">    
    <div class="left"><div></div></div>
    <div class="right"><div></div></div>
    <div class="progress"><span>0</span></div>
  </div>
</div>
<script>
/*
  by:王美建 CSS3 時鐘
*/
  setInterval(function(){
    var time = new Date(),
        H = time.getHours(),
        M = time.getMinutes(),
        S = time.getSeconds();
    showHours("hours",H,12);
    showHours("minutes",M,30);
    showHours("seconds",S,30);
  },30)

  function showHours(oClass,num,n){
    var aEle = getByClass(oClass)[0].children,
        Rdeg = num > n ? n : num,
        Ldeg = num > n ? num - n : 0;
    aEle[2].innerHTML = "<span>"+num+"</span>";

    aEle[1].children[0].style.transform = "rotateZ("+ (360/(2*n)*Rdeg-180) +"deg)";
    aEle[0].children[0].style.transform = "rotateZ("+ (360/(2*n)*Ldeg-180) +"deg)";
  }
  function getByClass(oClass){
    return document.getElementsByClassName(oClass);
  }
</script>

 

 本文出處：By：王美建 http://www.cnblogs.com/wangmeijian/p/4449150.html 轉載請保留出處。