loading动画

loading动画 file:///C:/Users/Administrator/Desktop/HTML/loading%E5%8A%A8%E7%94%BB.html

.box{

width: 500px;height: 240px;

/*background-color: gold;*/

margin: 100px auto 0;

/*animation-play-state:paused;*/

}

.box1{

width: 80px;

height: 200px;

margin: 2px;

background-color: green;

float: left;animation: moving 1s ease 200ms infinite alternate both;

}

.box2{

width: 80px;

height: 200px;

margin: 2px;

background-color: red;

float: left;

animation: moving 1s ease 400ms infinite alternate both;

}

.box3{

width: 80px;

height: 200px;

margin: 2px;

background-color: yellow;

float: left;

animation: moving 1s ease 600ms infinite alternate both;

}

.box4{

width: 80px;

height: 200px;

margin: 2px;

background-color: blue;

float: left;animation: moving 1s ease 800ms infinite alternate both;

}

.box5{

width: 80px;

height: 200px;

margin: 2px;

background-color: plum;

float: left; 

 animation: moving 1s ease 1000ms infinite alternate both;

}

@keyframes moving{

from{

transform: scaleY(1);

}

 to{

transform: scaleY(0.5);

}}