多针动画--练习
背面可见
.box1, .box2, .box3, .box4, .box5{
float:left;
margin-left:20px;
margin-top:30px;
border-radius:30%;
animation:moving 1s ease 1s ;
}
@keyframes loading {
from{
transform:scale(1);
}
to{
transform:scale(0.5);
}
}
.box{
width:310px;
height:135px;
/*background-color: #016999;*/
margin:100px auto;
border:black solid 1px;
}
.box1{
width:40px;
height:55px;
background-color:red;
animation:loading 500ms ease 0s infinite alternate;
/*margin: 10px auto;*/
/*border-radius:90%;*/
}
.box2{
width:40px;
height:55px;
background-color:#008100;
animation:loading 500ms ease 100ms infinite alternate;
}
.box3{
width:40px;
height:55px;
background-color:#ffc1cb;
animation:loading 500ms ease 200ms infinite alternate;
}
.box4{
width:40px;
height:55px;
background-color:#adff2e;
animation:loading 500ms ease 300ms infinite alternate;
}
.box5{
width:40px;
height:55px;
background-color:#00ffff;
animation:loading 500ms ease 400ms infinite alternate;
}
.log{
text-align:center;
margin-top:110px;
}
loading...
