前言
loading效果在實際開發中是很常見的,尤其是在Ajax請求的時候,可以給用戶一個很好的交互體驗。
今天這篇文章我們一起來看看如何通過CSS3實現各種不同的loading效果吧,文章中的代碼可以從github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
實現效果
首先我們來看看需要實現的效果。
然後我們一個個來看都是怎麼實現的吧。
loadingA
loadingA的效果就如音樂播放時的動態條一般,不停的連續執行。
其主要實現思路如下:
每個豎狀條都是一個簡單的div,div為一個小的圓形。
給每個div加上一個動畫效果,該動畫的效果是高度逐漸變長,最後再變回原樣。
每個div延遲不同的時間才開始執行,這樣就會有先後的層次感。
然後我們來看看各個部分的代碼實現。
基本的div元素
基本的div元素是一個小的圓形。
定義動畫
定義的動畫主要是改變div的高度,在完成50%的時候達到最高值,完成100%時恢復到原來高度。
設置動畫
將定義的動畫添加至animation屬性,設置一個動畫總執行時間,然後給5個div設置不同的延時時間。
HTML元素
將以上設置的CSS屬性都添加至HTML元素中。
將以上代碼寫完後,直接在瀏覽器運行就可以看到如loadingA的效果了。
loadingB
如果細心的看完loadingA的實現過程,一定可以聯想到loadingB的實現。
loadingA是通過給高度加動畫,那麼loadingB就是通過給寬度加動畫,同樣給5個div不同的延遲時間。
這裡我只給出其動畫定義,其他的內容與loadingA類似,詳細的內容可以通過github去看。
loadingC
loadingC的實現效果如下。
在loadingA和loadingB中是通過給高度和寬度增加動畫實現的,而loadingC是通過給五個div增加縱向位移實現的。
loadingC實現的關鍵點就在於translateY的使用,因為動畫是從下往上跳動,所以在完成度50%時,translateY設定為負值。
其定義的動畫部分代碼如下所示。
loadingD
loadingD的實現效果如下。
通過效果圖我們發現有兩點差異:
loading過程中透明度會發生變化,這個通過opacity實現。
在接近完成時有個上下輕微抖動的效果,這個通過設置小單位的正負translateY值。
得到的動畫代碼如下。
loadingE
loadingE的動畫效果如下。
loadingE的效果同loadingD類似,loadingD是通過縱向的位移變換,可以通過translateY實現。
loadingE是通過水平方向位移變換,可以通過translateX來實現。
而有一點不同的是,loadingE的div初始位置就是translateX(-300px),表示從左側開始運動。
loadingF
loadingF定義的動畫如下所示。
loadingF是旋轉效果,可以很容易想到是通過rotate實現。
loadingF中只有一個div,邊框設置為虛線即可,其CSS樣式如下。
其定義的動畫樣式如下。
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代碼如下所示。
在loadingH中,div-1內有四個div,分別表示轉動的四個圓點,也是通過絕對定位計算偏移位置。
最後設置動畫,只需要讓div-1在一個動畫週期內旋轉360度即可。
loadingI
loadingI的效果圖如下所示。
loadingI的動畫主要涉及到放大縮小和旋轉兩個方面,放大縮小通過scale實現,旋轉通過rotate實現。具體的可以看看github上的完整代碼。
結束語
今天這篇文章主要是教大家如何使用CSS3的動畫特性去實現loading效果,完全可以不用藉助於第三方庫,大家也動動手自己實現一下吧。
閱讀更多 coder分享 的文章