整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
loading效果在實際開發中是很常見的，尤其是在Ajax請求的時候，可以給用戶一個很好的交互體驗。
今天這篇文章我們一起來看看如何通過CSS3實現各種不同的loading效果吧，文章中的代碼可以從github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
CSS3
首先我們來看看需要實現的效果。
效果圖
然后我們一個個來看都是怎么實現的吧。
loadingA的效果就如音樂播放時的動態條一般，不停的連續執行。
其主要實現思路如下：
每個豎狀條都是一個簡單的div，div為一個小的圓形。
給每個div加上一個動畫效果，該動畫的效果是高度逐漸變長，最后再變回原樣。
每個div延遲不同的時間才開始執行，這樣就會有先后的層次感。
然后我們來看看各個部分的代碼實現。
基本的div元素
基本的div元素是一個小的圓形。
基本的div元素
定義動畫
定義的動畫主要是改變div的高度，在完成50%的時候達到最高值，完成100%時恢復到原來高度。
動畫效果
設置動畫
將定義的動畫添加至animation屬性，設置一個動畫總執行時間，然后給5個div設置不同的延時時間。
設置動畫
HTML元素
將以上設置的CSS屬性都添加至HTML元素中。
HTML元素
將以上代碼寫完后，直接在瀏覽器運行就可以看到如loadingA的效果了。
如果細心的看完loadingA的實現過程，一定可以聯想到loadingB的實現。
loadingA是通過給高度加動畫，那么loadingB就是通過給寬度加動畫，同樣給5個div不同的延遲時間。
這里我只給出其動畫定義，其他的內容與loadingA類似，詳細的內容可以通過github去看。
loadingB動畫
loadingC的實現效果如下。
loadingC
在loadingA和loadingB中是通過給高度和寬度增加動畫實現的，而loadingC是通過給五個div增加縱向位移實現的。
loadingC實現的關鍵點就在于translateY的使用，因為動畫是從下往上跳動，所以在完成度50%時，translateY設定為負值。
其定義的動畫部分代碼如下所示。
定義動畫
loadingD的實現效果如下。
loadingD效果
通過效果圖我們發現有兩點差異：
loading過程中透明度會發生變化，這個通過opacity實現。
在接近完成時有個上下輕微抖動的效果，這個通過設置小單位的正負translateY值。
得到的動畫代碼如下。
loadingD動畫
loadingE的動畫效果如下。
loadingE
loadingE的效果同loadingD類似，loadingD是通過縱向的位移變換，可以通過translateY實現。
loadingE是通過水平方向位移變換，可以通過translateX來實現。
而有一點不同的是，loadingE的div初始位置就是translateX(-300px)，表示從左側開始運動。
loadingE動畫
loadingF定義的動畫如下所示。
loadingF
loadingF是旋轉效果，可以很容易想到是通過rotate實現。
loadingF中只有一個div，邊框設置為虛線即可，其CSS樣式如下。
loadingF基本樣式
其定義的動畫樣式如下。
loadingF定義動畫
loadingG與loadingH的動畫效果如下。
loadingG&loadingH
loadingG與loadingH類似，loadingH在loadingG的基礎上增加了幾個點。
loadingG中是通過設置一個縱向的div-1，在該div-1內增加一個div-2，div-2就是轉動的圓點，div-2通過絕對定位計算出實際位置，當div-1大小變化時，div-2也應該重新計算位置。
div-2的CSS代碼如下所示。
loadingG基本樣式
在loadingH中，div-1內有四個div，分別表示轉動的四個圓點，也是通過絕對定位計算偏移位置。
最后設置動畫，只需要讓div-1在一個動畫周期內旋轉360度即可。
loadingG
loadingI的效果圖如下所示。
loadingI
loadingI的動畫主要涉及到放大縮小和旋轉兩個方面，放大縮小通過scale實現，旋轉通過rotate實現。具體的可以看看github上的完整代碼。
今天這篇文章主要是教大家如何使用CSS3的動畫特性去實現loading效果，完全可以不用借助于第三方庫，大家也動動手自己實現一下吧。
loading等待效果圖對于前端頁面或者APP展示來說是非常常見的，目前大多數的效果圖都是GIF的格式。鑒于GIF格式的圖會比較大，我們完全可以使用CSS去實現一個漂亮的loading效果，今天我們就一起來看看吧。
CSS3
如果有感興趣的可以去github上看源碼，github地址為：
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading-pie/loading-pie.html
首先，我們一起來看下使用CSS3編寫的loading效果圖，如下所示。
loading效果圖
針對上面的loading效果，我們進行仔細的分析，整體loading效果是由內圓和外圓組成。
內部圓實際是由四個半圓組成，2個左半圓，2個右半圓，每側的兩個半圓通過顏色深淺進行區分，當然顏色大家可以隨便選取，然后通過定義動畫，在不同的時間節點通過z-index屬性顯示不同的半圓，剛好組成一個完整的旋轉效果。
這部分我們來看看頁面是如何通過代碼實現的。
HTML
首先是頁面的HTML代碼，正如上面的分析，首先要具有內圓和外圓兩個div，然后內圓是通過4個半圓實現，實際內部是4個div，因此我們可以得到以下的HTML部分代碼。
頁面HTML代碼
CSS
其實最核心的部分就是CSS代碼，我會慢慢分析如何寫出CSS部分的代碼。
首先是外圓部分，實際是一個完整的div通過border屬性構成3/4的圓，然后通過動畫轉動這個3/4的圓。因此我們可以直接得出外圓的所有樣式如下。
外圓及其動畫樣式
然后是內圓部分，內圓實際是一個完整的div，通過border-radius屬性得到完整的圓，其樣式如下。
內圓外圈屬性
其次是內部四個半圓的樣式，分為左邊和右邊兩個部分，左邊和右邊每個部分因為顏色上有區別，需要定義不同的動畫。其中左邊兩個半圓的通用屬性如下。
左邊半圓通用屬性
左半邊深色圓的動畫樣式如下。
左半邊深色圓動畫
左半邊淺色圓的動畫效果如下。
左半邊淺色圓動畫
右半邊兩個半圓通用樣式如下。
右半邊兩個半圓通用樣式
右半邊深色圓有動畫效果，而淺色圓沒有動畫效果，它們的樣式如下。
右半邊深淺色半圓樣式
至此，所有的CSS樣式講解完畢，如果大家完整運行后就可以得到文章開始的效果。
本篇文章主要講解了如何使用CSS3動畫來制作一個loading效果圖，感興趣的可以直接去github上看源碼，希望對你有所幫助~
前做網站開發，大都喜歡用一些小圖片小圖標，但由于使用小圖標會增加Request的次數并增加網頁大小。這樣的用戶體驗以及對SEO都不太友好。所以后來推出了字體圖標，如font-awesome。
在網站中，特別是使用AJAX技術，Loading圖標必不可少，大多數人都是使用一個gif圖片來做，這里我介紹使用CSS3動畫技術來實現Loading特效，有些人也許會說IE怎么辦，我只能說，忘了它吧。先來個效果圖：
這里沒有動畫效果，本來想將CSS動畫錄制為gif的，但錄制效果太差，放棄了，只貼這個圖片吧，如果有朋友知道有錄制效果好的軟件，麻煩告之，不勝感激。需要查看實際效果的朋友，可復制代碼運行即可。
html完整代碼：
<html>
<head>
<title>css3動畫實現超酷loading特效</title>
<style type="text/css">
.loading {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
.spinner-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 300;
height: 100%;
min-width: 100%;
min-height: 100%;
background: rgba(255,255,255,0.93);
}
.spinner {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
animation: 1.5s ease 0s normal none infinite running spin;
border-color: rgba(255, 0, 0, 1) transparent;
border-image: none;
border-radius: 50px;
border-style: solid;
border-width: 20px;
display: block;
height: 1px;
left: 50%;
margin-left: -160px;
position: absolute;
top: 45%;
width: 1px;
}
.spinner-text {
color: #000;
font-family: Arial;
font-size: 20px;
left: 50%;
letter-spacing: 1px;
margin-left: -100px;
margin-top: 2px;
position: absolute;
top: 45%;
}
@keyframes spin {
0%, 100% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(720deg) scale(0.6);
}
}
@keyframes spin {
0%, 100% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(720deg) scale(0.6);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="spiner-wrapper">
<div class="spinner-wrapper">
<span class="spinner-text">數據加載中，請稍候...</span>
<span class="spinner"></span>
</div>
</div>
</div>
</body>
</html>
上面即為本動畫效果所有代碼，直接復制代碼便可輕松應用到你的網頁中。從此告別gif吧，同時跟低版本的IE告別吧。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
