Css3实现常用的几种loading动画
css实现loading动画非常方便，也非常实用
第一种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .loading1{ width:50px; height:40px; margin:60px auto; text-align:center; } .loading1 span{ width:5px; height:100%; display:inline-block; background:#67CF22;; animation: mymove 1.2s infinite ease-in-out; -webkit-animation:mymove 1.2s infinite ease-in-out; /* mymove代表动画名字 1.2s代表执行时间 infinite表示一直循环执行 ease-in-out表示先慢后快的缓动 */ } .loading1 >span:nth-child(2){ -webkit-animation-delay:-1.0s; animation-delay:-1.0s; } .loading1 >span:nth-child(3){ -webkit-animation-delay:-0.9s; animation-delay:-0.9s; } .loading1 >span:nth-child(4){ -webkit-animation-delay:-0.8s; animation-delay:-0.8s; } .loading1 >span:nth-child(5){ -webkit-animation-delay:-0.7s; animation-delay:-0.7s; } @keyframes mymove{ 0%{transform:scaleY(0.4);} 25%{transform:scaleY(1.0);} 50%{transform:scaleY(0.4);} 75%{transform:scaleY(0.4);} 100%{transform:scaleY(0.4);} } @-webkit-keyframes mymove{ 0%{transform:scaleY(0.4);} 25%{transform:scaleY(1.0);} 50%{transform:scaleY(0.4);} 75%{transform:scaleY(0.4);} 100%{transform:scaleY(0.4);} } </style> </head> <body> <div class="loading1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
第二种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .loading2{ width:50px; height:50px; margin:50px auto; position:relative; } .bounce{ position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 50%; background-color: #67CF22; opacity: 0.6; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .bounce2{ -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @keyframes bounce{ 0%{transform:scale(0.0);} 50%{transform:scale(1.0);} 100%{transform:scale(0.0);} } @-webkit-keyframes bounce{ 0%{transform:scale(0.0);} 50%{transform:scale(1.0);} 100%{transform:scale(0.0);} } </style> </head> <body> <div class="loading2"> <div class="bounce bounce1"></div> <div class="bounce bounce2"></div> </div> </body> </html>
第三种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .loading3{ width:30px; height:30px; margin:50px auto; position:relative; } .circle{ position:absolute; top:0; left:0; width:100%; height:100%; } .circle span{ width:8px; height:8px; display:inline-block; background:#67CF22; border-radius: 100%; position:absolute; -webkit-animation: mycircle 1.2s infinite ease-in-out; animation: mycircle 1.2s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .circle2{ -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .circle3{ -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle>span:nth-child(1){ top:0; left:0; } .circle>span:nth-child(2){ top:0; right:0; } .circle>span:nth-child(3){ right:0; bottom:0; } .circle>span:nth-child(4){ left:0; bottom:0; } .circle2 >span:nth-child(1){ -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .circle3 >span:nth-child(1){ -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .circle1 >span:nth-child(2){ -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .circle2 >span:nth-child(2){ -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .circle3 >span:nth-child(2){ -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .circle1 >span:nth-child(3){ -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .circle2 >span:nth-child(3){ -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .circle3 >span:nth-child(3){ -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .circle1 >span:nth-child(4){ -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .circle2 >span:nth-child(4){ -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .circle3 >span:nth-child(4){ -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes mycircle{ 0%{transform:scale(0.0);} 40%{transform:scale(1.0);} 80%{transform:scale(0.0);} 100%{transform:scale(0.0);} } @keyframes mycircle{ 0%{transform:scale(0.0);} 40%{transform:scale(1.0);} 80%{transform:scale(0.0);} 100%{transform:scale(0.0);} } </style> </head> <body> <div class="loading3"> <div class="circle circle1"> <span></span> <span></span> <span></span> <span></span> </div> <div class="circle circle2"> <span></span> <span></span> <span></span> <span></span> </div> <div class="circle circle3"> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>
第四种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .loading4{ width:150px; margin:50px auto; text-align: center; } .loading4 >div{ width: 18px; height: 18px; border-radius: 100%; display:inline-block; background-color: #67CF22; -webkit-animation: three 1.4s infinite ease-in-out; animation: three 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .loading4 .three1{ -webkit-animation-delay: -0.30s; animation-delay: -0.30s; } .loading4 .three2{ -webkit-animation-delay: -0.15s; animation-delay: -0.15s; } @-webkit-keyframes three { 0%, 80%, 100% {-webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes three { 0%, 80%, 100% {-webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } </style> </head> <body> <div class="loading4"> <div class="three1"></div> <div class="three2"></div> <div class="three3"></div> </div> </body> </html>
