js和css3实现的加载等待特效
分类:实例代码
下面的代码实现了加载等待效果,代码是js结合css3实现的。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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()一章节。
js和css3实现的加载等待特效,这样的场景在实际项目中还是用的比较多的,关于js和css3实现的加载等待特效就介绍到这了。
js和css3实现的加载等待特效属于前端实例代码,有关更多实例代码大家可以查看。