<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>机试</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.da{
width: 800px;
height: 200px;
border: 3px solid black;
margin: 0 auto;
margin-top: 100px;
}
.a{
margin-top: 75px;
}
.a li{
width: 50px;
height: 50px;
float: left;
list-style: none;
margin-left: 91px;
}
.a1, .a2, .a3, .a4, .a5{
animation: moving 3s infinite;
border-radius: 10px;
}
.a .a1{
background-color: red;
}
.a .a2{
background-color: #008000;
animation-delay: 100ms;
}
.a .a3{
background-color: pink;
animation-delay: 200ms;
}
.a .a4{
background-color: #adff2f;
animation-delay: 300ms;
}
.a .a5{
background-color: #bfa;
animation-delay: 400ms;
}
@keyframes moving{
0%{
transform: scaleY(0);
}
50%{
transform: scaleY(2);
}
100%{
transform: scaleY(0);
}
}
</style>
</head>
<body>
<div class="da">
<ul class="a">
<li class="a1"></li>
<li class="a2"></li>
<li class="a3"></li>
<li class="a4"></li>
<li class="a5"></li>
</ul>
</div>
</body>
</html>
