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小時內與您取得聯系。