CSS3 loadding效果代码
分类:实例代码
CSS3 loadding效果代码属于前端实例代码,有关更多实例代码大家可以查看。
loadding加载效果多种多样,下面再来分享一个此类小狗。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body { background-color: #22475E; overflow: hidden; } div { width: 30px; height: 30px; position: absolute; background-color: #ccc; top: 45%; border-radius: 50%; } div:nth-child(1) { background-color: #FF5460; animation: move 2s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23); } div:nth-child(2) { background-color: #FF9D84; animation: move 2s 150ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23); } div:nth-child(3) { background-color: #F0E797; animation: move 2s 300ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23); } div:nth-child(4) { background-color: #75B08A; animation: move 2s 450ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23); } @keyframes move { 0% { left: 0%; } 100% { left: 100%; } } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
CSS3 loadding效果代码,这样的场景在实际项目中还是用的比较多的,关于CSS3 loadding效果代码就介绍到这了。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu