css3特效 loading載入中

2021-09-02 10:16:26 字數 402 閱讀 6968

以前loading都是一張,顯示或隱藏。

現在如果考慮移動端弱網到連也載入不成功,此時css3的loading就非常有用了,而且模擬了效果,節省空間。

基本原理:

1,外部乙個span,固定寬高(正方形),行內塊元素,相對定位,垂直對齊。

2,內部12個span,相對寬高(相對外部),行內塊元素,絕對定位(top,left),顏色,背景色,動畫(最重要,作用是顏色從重變淺)

3,每乙個span單獨寫css,目的是位置(通過rotate和translate)和延遲時間(animation-delay)。

目測,每乙個span裡color多餘,內部12個公共span的border-radius多餘。

正在載入

純css3 載入loading動畫特效

最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading,本來是想做個提示的,但是如果放大電腦的解析度就會感覺到很虛,體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果,最終在我們前端工程師的幫助之下完成。所以記錄在這裡,如果感興趣的朋友也可以看看,大家互相焦爐學...

純css3 載入loading動畫特效

最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading,本來是想做個提示的,但是如果放大電腦的解析度就會感覺到很虛,體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果,最終在我們前端工程師的幫助之下完成。所以記錄在這裡,如果感興趣的朋友也可以看看,大家互相焦爐學...

CSS3實現Loading載入動畫特效大全

目前大部分web開發載入 loading 特效是採用gif形式展現,隨著html5 css3技術的成熟,純css3版本loading載入動畫效果已經可以比擬gif動畫效果,當然是需要瀏覽器的相容性要好,下面 大頭網 spinner spinner div spinner rect2 spinner ...