純css去實現loading動畫效果圖

當項目中加載內容慢的的時候，須要顯示一個loading動畫效果圖
以前咱們使用的是一圈點點旋轉的效果，如今設計修改成，以下gif圖片效果
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
真假美猴王之－－－真假loading效果圖，連接以下
http://output.jsbin.com/xutacedica
打開連接預覽效果，您能一眼看出，誰是圖片製做的gif?誰是css寫的loading效果？
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
旋轉的gif，通常咱們首先想到的是圖片，也如此，大多數是使用gif圖片的．
然，感受圖片，體積大，旋轉的gif比透明的png高了3倍大小
遂，嘗試,css實現旋轉loading效果
-----------html代碼------------
<b></b>
-----------html代碼------------

--------------css核心代碼----------------
b {
background: url(../icon-bg.png) no-repeat center;
background-size: 51px 51px;
}

b {
border-right-color: transparent;
border-radius: 45px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 90px;
height: 90px;
}

b:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 86px;
height: 86px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 2px #469CEE solid;
clip: rect(50px, 90px, 90px, 0);
-webkit-animation: b 1.1s infinite linear;
-webkit-animation: b 1.1s infinite linear;
-moz-animation: b 1.1s infinite linear;
-o-animation: b 1.1s infinite linear;
animation: b 1.1s infinite linear;
}

b:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 86px;
height: 86px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 2px #469CEE solid;
clip: rect(0, 90px, 40px, 0);
-webkit-animation: b 1.1s infinite linear;
-webkit-animation: b 1.1s infinite linear;
-moz-animation: b 1.1s infinite linear;
-o-animation: b 1.1s infinite linear;
animation: b 1.1s infinite linear;
}

--------------css核心代碼----------------

如此，便可！純css實現loading效果圖，頁面及樣式並png圖片加起來實現的體積大小，爲ps生成的gif放圖片，1/3
且效果連續展示，完美，沒有卡頓於鋸齒。

感謝zyx,lost等得以精益求精
下載連接地址 http://files.cnblogs.com/files/leshao/loading%E5%AE%9E%E7%8E%B0gif.rar