js和css3實現的載入等待特效
下面的程式碼實現了載入等待效果,程式碼是js結合css3實現的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { display: flex; min-height: 100vh; margin: 0; } .box { width: 8em; height: 8em; margin: auto; background: rgba(0,0,0,.3); border-radius: 1em; display: flex; } .box ul { width: 6em; height: 6em; list-style: none; margin: auto; padding: 0; position: relative; } .box li { width: .5em; height: 2em; background: rgba(255,255,255,.3); border-radius: .4em; position: absolute; top: 50%; margin-top: -1em; left: 50%; margin-left: -.25em; transition: background .1s; } .box li.back { background: #fff; } .box li:nth-child(1) { transform: translate(0,-2em) rotate(0deg); } .box li:nth-child(2) { transform: translate(1.42em,-1.42em) rotate(45deg); } .box li:nth-child(3) { transform: translate(2em,0) rotate(90deg); } .box li:nth-child(4) { transform: translate(1.42em,1.42em) rotate(135deg); } .box li:nth-child(5) { transform: translate(0,2em) rotate(180deg); } .box li:nth-child(6) { transform: translate(-1.42em,1.42em) rotate(225deg); } .box li:nth-child(7) { transform: translate(-2em,0) rotate(270deg); } .box li:nth-child(8) { transform: translate(-1.42em,-1.42em) rotate(315deg); } </style> <script> window.onload = function () { var box_li = Array.prototype.slice.apply(document.querySelectorAll('.box li')); var index = 0; requestAnimationFrame(function () { var a = arguments.callee; if (index >= box_li.length) { index = 0; box_li.forEach(function (value, index) { value.classList.remove('back'); }); return setTimeout(function () { a(); }, 500) } box_li[index].classList.add('back'); index++; setTimeout(function () { a(); }, 200) }) } </script> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
上面的程式碼相對比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).rgba可以參閱CSS3 RGBA一章節。
(2).border-radius可以參閱CSS3 border-radius一章節。
(3).display: flex可以參閱css3 Flex彈性佈局一章節。
(4).:nth-child可以參閱nth-child()一章節。
(5).document.querySelectorAll()可以參閱document.querySelectorAll()一章節。
(6).apply()可以參閱js apply()一章節。
(7).requestAnimationFrame()可以參閱requestAnimationFrame()一章節。
(8).classList可以參閱HTML5 classList一章節。
(9).setTimeout()可以參閱setTimeout()一章節。
相關文章
- CSS3實現的頁面載入等待效果CSSS3
- css3實現的旋轉載入等待效果CSSS3
- CSS3實現的小球旋轉載入等待效果CSSS3
- CSS3實現的loadding載入等待效果CSSS3
- CSS3載入等待動畫效果CSSS3動畫
- css3實現圓形載入動畫的js外掛CSSS3動畫JS
- CSS3旋轉載入等待效果CSSS3
- CSS3實現全景圖特效CSSS3特效
- CSS3五連珠載入等待效果CSSS3
- 超酷的 CSS3 loading 預載入動畫特效CSSS3動畫特效
- css3點狀旋轉載入等待效果CSSS3
- JS實現載入層JS
- 純CSS3實現圖片展示特效CSSS3特效
- js和css3實現的空調效果JSCSSS3
- css3和js實現的大白動畫效果CSSS3JS動畫
- js實現圓環百分比載入等待效果程式碼例項JS
- vue實現首屏載入等待動畫 避免首次載入白屏尷尬Vue動畫
- jQuery/CSS3實現滑鼠點選波浪特效jQueryCSSS3特效
- css3實現的loadding載入動畫效果CSSS3動畫
- js和css3實現的扇子展開效果JSCSSS3
- css3實現的loadding旋轉載入效果CSSS3
- js和css3實現的圓形鐘錶效果JSCSSS3
- 圖片懶載入js實現JS
- [譯] 使用 Angular 和 RxJS 實現的無限滾動載入AngularJS
- jQuery實現的非同步動態載入css和js檔案jQuery非同步CSSJS
- 基於Js和Java實現xlsxxls文件的匯入和下載JSJava
- js動態載入實現提高網頁載入速度JS網頁
- 原生js實現的動態載入css和js檔案程式碼例項JSCSS
- css3實現絢麗loadding載入效果CSSS3
- css3實現旋轉loadding載入效果CSSS3
- CSS3 動畫實現的 3D 圖片過渡特效CSSS3動畫3D特效
- jQuery/CSS3實現圖片層疊展開特效jQueryCSSS3特效
- 優雅的實現動態載入 css、jsCSSJS
- css3實現的loadding載入動畫程式碼例項CSSS3動畫
- 使用CSS3實現超炫的Loading(載入)動畫效果CSSS3動畫
- js和css3實現能夠展開和摺疊的摺扇效果JSCSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- 小說APP原始碼的圖片載入方式,懶載入和預載入的實現APP原始碼