CSS3 loadding加载效果
分类:实例代码
CSS3 loadding加载效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了四小球loadding加载效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .container{ width: 300px; height: 300px; position: relative; margin:50px auto; } .circle{ width: 100px; height: 100px; position: absolute; border-radius: 50%; } #one{ left: 0; top: 0; background:#f00; animation: move1 2s ease-in-out infinite; } #two{ right: 0; top: 0; background:#000; animation: move2 2s ease-in-out infinite; } #three{ left: 0; bottom: 0; background:blue; animation: move3 2s ease-in-out infinite; } #four{ right: 0; bottom: 0; background:yellow; animation: move4 2s ease-in-out infinite; } /*动画*/ @keyframes move1{ 0%{transform: translate(0,0)} 50%{transform: translate(200px,200px)} 100%{transform: translate(0,0)} } @keyframes move2{ 0%{transform: translate(0,0)} 50%{transform: translate(-200px,200px)} 100%{transform: translate(0,0)} } @keyframes move3{ 0%{transform: translate(0,0)} 50%{transform: translate(200px,-200px)} 100%{transform: translate(0,0)} } @keyframes move4{ 0%{transform: translate(0,0)} 50%{transform: translate(-200px,-200px)} 100%{transform: translate(0,0)} } </style> </head> <body> <div class="container"> <div class="circle" id="one"></div> <div class="circle" id="two"></div> <div class="circle" id="three"></div> <div class="circle" id="four"></div> </div> </body> </html>
CSS3 loadding加载效果,这样的场景在实际项目中还是用的比较多的,关于CSS3 loadding加载效果就介绍到这了。