CSS3應用範圍越來越廣，特別是在如今谷歌瀏覽器逐步替代IE的情況下
今天特意給大家推荐一款css3 loading加載效果
當然，他並不是純CSS3的，抱歉標題可能會有些歧義，但是偶爾的一點點的js也是可以忽略的啦
附件提供了28個不同的加載效果，你可以任選一種作為你的手機網頁端部分模組的載入效果，而不需要考慮相容性的問題
使用方法：
#1，將頭中的CSS樣式以及JS引入到你的網頁中
2，選擇一個你喜歡的載入效果，複製其中的HTML到你的網頁中即可
（注意的index.html底部的JS別漏掉了）
十七、效果十七
@keyframes leap_ball { 50% {
transform: translateY(60px);
}}
三個小球，橫縱方向上均居中，透過外邊距撐開小球之間的距離，從效果上看是左右兩邊的兩個小球在圍繞中間小球做環繞運動，那麼我們可以直接讓小球的父元素來旋轉，來達到兩邊小球的環繞效果（父元素旋轉的時候，因為圓形，所以中間小球看不出是在旋轉，並且中間的位置也不會改變，從視覺上看，中間小球沒有做任何變化）。
@keyframes wind_ball { 50% {
transform: rotateZ(180deg);
} 100% {transform: rotateZ(360deg);
}}
#
總共五個小球，每個小球執行的動畫都一樣，只是每個小球的動畫延遲時間不同，而使小球的位置不同，將五個小球定位至同一個位置作為統一起點（這裡，我是將五個小球統一定位至最右邊）{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP { 80% {
right: 75%; //到达终点，开始返回起点 }}
@keyframes cool_ballS { 80% { //到达终点
top: 25%;width: 20px;height: 20px;
} 81% { //开始返回起点，长度变大，宽度变小，模拟移动产生的形变top: 0;width: 25px;height: 15px;
} 99% { //到达起点top: 0;width: 25px;height: 15px;
} 100% { //恢复初始width: 20px;height: 20px;
}
}登入後複製
2、效果二十
{animation: load_ball 1.6s linear infinite;}@keyframes load_ball { 50% {
height: 0;width: 0;
} 80% {height: 0;width: 0;
}}@keyframes triangle_ball { 16% {
opacity: .6;
} 33% {left: 100%;top: 100%;opacity: 1;
} 50% {opacity: .6;
} 66% {left: 0;top: 100%;opacity: 1;
} 83% {opacity: .6;
} 99% {top: 0;left: 50%;opacity: 1;
}}.gear_ball { height: 60px; width: 60px; border-radius: 50%; display: inline-block; border: 4px #fff solid; position: relative;
}.gear_ball:after { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; top: -8px; left: -8px; border: 8px #fff dashed;
}以上是css3 loading載入圖文實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
