loading动画 file:///C:/Users/Administrator/Desktop/HTML/loading%E5%8A%A8%E7%94%BB.html
<!DOCTYPE html>
<html>
<head>
<title>animation动画</title>
.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);
}}
</style>
</head>
<body>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
