<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加载动画</title> <style> /* 加载动画.html css */ #load_bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.3); top: 0; left: 0; bottom: 0; z-index: 1; } .load_box { width: 200px; height: 200px; position: fixed; left: 50%; top: 50%; margin: 0 auto; z-index: 2; margin-top: -100px; margin-left: -100px; } .load_box > .load { align-items: center; justify-content: center; } .load_box > .load > .loading > i { display: inline-block; width: 5px; height: 30px; border-radius: 3px; background: #333; margin: 0 3px; } .load_box > .load > .loading > i:nth-child(1) { animation: loading-2 1s linear 0s infinite; -o-animation: loading-2 1s linear 0s infinite; -moz-animation: loading-2 1s linear 0s infinite; -webkit-animation: loading-2 1s linear 0s infinite; } .load_box > .load > .loading > i:nth-child(2) { animation: loading-2 1s ease-in 0.2s infinite; -o-animation: loading-2 1s ease-in 0.2s infinite; -moz-animation: loading-2 1s ease-in 0.2s infinite; -webkit-animation: loading-2 1s ease-in 0.2s infinite; } .load_box > .load > .loading > i:nth-child(3) { animation: loading-2 1s ease-in 0.4s infinite; -o-animation: loading-2 1s ease-in 0.4s infinite; -moz-animation: loading-2 1s ease-in 0.4s infinite; -webkit-animation: loading-2 1s ease-in 0.4s infinite; } .load_box > .load > .loading > i:nth-child(4) { animation: loading-2 1s ease-in 0.8s infinite; -o-animation: loading-2 1s ease-in 0.8s infinite; -moz-animation: loading-2 1s ease-in 0.8s infinite; -webkit-animation: loading-2 1s ease-in 0.8s infinite; } .load_box > .load > .loading > i:nth-child(5) { animation: loading-2 1s ease-in 1s infinite; -o-animation: loading-2 1s ease-in 1s infinite; -moz-animation: loading-2 1s ease-in 1s infinite; -webkit-animation: loading-2 1s ease-in 1s infinite; } @-webkit-keyframes loading-2 { 0% { transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); -moz-transform: scaleY(1); -webkit-transform: scaleY(1); } 50% { transform: scaleY(0.4); -o-transform: scaleY(0.4); -ms-transform: scaleY(0.4); -moz-transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 100% { transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); -moz-transform: scaleY(1); -webkit-transform: scaleY(1); } } </style> </head> <body style="background: #fff"> <!--遮罩层开始--> <div id="load_bg"></div> <div class="load_box"> <div class="load"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div><!-- ./loading end--> </div><!--./load end--> </div><!--./box end--> </body> </html>
纯css3实现 正在加载 动画
猜你喜欢
转载自blog.csdn.net/u010359143/article/details/50329567
今日推荐
周排行