<!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>