純css3 載入loading動畫特效

2022-07-05 13:00:12 字數 1579 閱讀 1181

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

1、demo.html
2、loaders.css

/**


* * all animations must live in their own file


* in the animations directory and be included


* here.


* */


/** * styles shared by multiple animations


*//**


*/.ball-spin-fade-loader 


.ball-spin-fade-loader > div:nth-child(1) 


.ball-spin-fade-loader > div:nth-child(2) 


.ball-spin-fade-loader > div:nth-child(3) 


.ball-spin-fade-loader > div:nth-child(4) 


.ball-spin-fade-loader > div:nth-child(5) 


.ball-spin-fade-loader > div:nth-child(6) 


.ball-spin-fade-loader > div:nth-child(7) 


.ball-spin-fade-loader > div:nth-child(8) 


.ball-spin-fade-loader > div 


@-webkit-keyframes line-spin-fade-loader 


100%  }


@keyframes line-spin-fade-loader 


100%  }


.line-spin-fade-loader 


.line-spin-fade-loader > div:nth-child(1) 


.line-spin-fade-loader > div:nth-child(2) 


.line-spin-fade-loader > div:nth-child(3) 


.line-spin-fade-loader > div:nth-child(4) 


.line-spin-fade-loader > div:nth-child(5) 


.line-spin-fade-loader > div:nth-child(6) 


.line-spin-fade-loader > div:nth-child(7) 


.line-spin-fade-loader > div:nth-child(8) 


.line-spin-fade-loader > div
3、效果圖

純css3 載入loading動畫特效

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

css3特效 loading載入中

以前loading都是一張，顯示或隱藏。現在如果考慮移動端弱網到連也載入不成功，此時css3的loading就非常有用了，而且模擬了效果，節省空間。基本原理 1，外部乙個span，固定寬高 正方形 行內塊元素，相對定位，垂直對齊。2，內部12個span，相對寬高 相對外部 行內塊元素，絕對定位 to...

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

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