loading效果实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } .load1{ width: 300px; height: 50px; margin: 100px auto 0; } .load1 li{ width: 10px; height: 50px; background: red; float: left; margin-right: 20px; transform: scaleY(0.2); /*animation:move1 1s ease infinite alternate ;*/ } @-webkit-keyframes move1{ 0%{ transform: scaleY(0.2); } 100%{ transform: scaleY(2); } } .load2{ position:relative; margin:100px auto 0; width:50px; height:50px; trans } .load2 .bigCircle{ position: absolute; left: 0; top: 0; width: 40px; height: 40px; border: 5px solid transparent; border-left: 5px solid purple; border-top: 5px solid purple; border-radius: 50%; transform: rotate(0deg); } .load2 .smallCircle{ position: absolute; left:0; top:0; right:0; bottom:0; margin:auto; width: 30px; height: 30px; border: 5px solid transparent; border-right: 5px solid yellow; border-bottom: 5px solid yellow; border-radius: 50%; transform: rotate(0deg); /*animation: rotate 2s ease;*/ } @-webkit-keyframes rotate{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } </style> </head> <body> <div class="load1"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="load2"> <div class="bigCircle"></div> <div class="smallCircle"></div> </div> <script> var aLi = document.getElementsByTagName("li"); var oLoad2 = document.getElementsByClassName("load2"); var bCircle = document.getElementsByClassName("bigCircle")[0]; console.log(bCircle) var sCircle = document.getElementsByClassName("smallCircle")[0]; for(var i = 0 ; i < aLi.length;i++) { aLi[i].style.webkitAnimation = "move1 1.1s "+i*0.3+"s ease infinite alternate"; } bCircle.style.webkitAnimation = "rotate 2s"; bCircle.addEventListener("webkitAnimationEnd",function(){ bCircle.style.webkitAnimation = ""; sCircle.style.webkitAnimation = "rotate 0.5s"; },false) sCircle.addEventListener("webkitAnimationEnd",function(){ sCircle.style.webkitAnimation = ""; bCircle.style.webkitAnimation = "rotate 0.5s"; }) </script> </body> </html>