css3点状旋转加载等待效果
分类:实例代码
分享一个加载等待代码实例,它实现了点状旋转效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } .loader { position: relative; float: left; width: 200px; height: 200px; margin: 20px; border: 1px solid #ccc; } .loading_1 { width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; margin: -40px; } .loading_1 li { display: block; position: absolute; width: 16px; height: 16px; border-radius: 50%; background-color: rgba(27, 255, 204, 0.82); } @keyframes move1 { 50% { transform: scale(0.4); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } } .loading_1 li:nth-child(1) { top: 0px; left: 32px; animation: move1 0.9s ease 0s infinite; } .loading_1 li:nth-child(2) { top: 9px; left: 54px; animation: move1 0.9s ease -0.1s infinite; } .loading_1 li:nth-child(3) { top: 32px; left: 63px; animation: move1 0.9s ease -0.2s infinite; } .loading_1 li:nth-child(4) { top: 54px; left: 55px; animation: move1 0.9s ease -0.3s infinite; } .loading_1 li:nth-child(5) { top: 64px; left: 32px; animation: move1 0.9s ease -0.4s infinite; } .loading_1 li:nth-child(6) { top: 54px; left: 9px; animation: move1 0.9s ease -0.5s infinite; } .loading_1 li:nth-child(7) { top: 32px; left: 0px; animation: move1 0.9s ease -0.6s infinite; } .loading_1 li:nth-child(8) { top: 9px; left: 9px; animation: move1 0.9s ease -0.7s infinite; } </style> </head> <body> <div class="loader"> <ul class="loading_1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
相关阅读:
(1).border-radius可以参阅CSS3 border-radius一章节。
(2).@keyframes可以参阅CSS3 @keyframes一章节。
(3).animation可以参阅CSS3 animation一章节。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu