<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>机试</title>
<link rel="stylesheet" href="3.css">
</head>
<body>
<div class="box1">
<ul class="box2">
<li class="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
<li class="box6"></li>
<li class="box7"></li>
</ul>
<p><div class="er1">略略略。。。</div></p >
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.box1{
background: white;
border: 1px solid black;
width: 700px;
height: 300px;
padding-top: 200px;
}
.er1{
margin: 0 auto;
margin-top: 150px;
text-align: center;
}
.box2 li{
list-style: none;
width: 60px;
height: 34px;
border-radius: 50px;
float: left;
/* transition-delay: 100ms;*/
}
.box3{
background-color: rgb(255,0,0);
margin-left: 10px;
margin-right: 80px;
animation: moving 2s infinite 0ms ;
}
.box4{
background-color: rgb(0,128,0);
margin-right: 80px;
animation: moving 2s infinite 100ms ;
}
.box5{
background-color: rgb(255,192,103);
margin-right: 80px;
animation: moving 2s infinite 200ms ;
}
.box6{
background-color: rgb(173,255,47);
margin-right: 80px;
animation: moving 2s infinite 300ms ;
}
.box7{
background-color: rgb(0,255,255);
margin-right: 10px;
animation: moving 2s infinite 400ms ;
}
@keyframes moving {
0%{
transform:scaleY(1)
}
50%{
transform: scaleY(3);
}
100%{
transform: scaleY(1);
}
}
