<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>机试</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="all">
<ul class="all_top">
<li class="all_top_first"></li>
<li class="all_top_second"></li>
<li class="all_top_third"></li>
<li class="all_top_fouth"></li>
<li class="all_top_fifth"></li>
</ul>
<p><div class="font">loading...</div></p>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.all{
background: white;
border: 1px solid black;
width: 700px;
height: 300px;
padding-top: 200px;
}
.font{
margin: 0 auto;
margin-top: 150px;
text-align: center;
}
.all_top li{
list-style: none;
width: 60px;
height: 34px;
border-radius: 50px;
float: left;
/* transition-delay: 100ms;*/
}
.all_top_first{
background-color: rgb(255,0,0);
margin-left: 10px;
margin-right: 80px;
animation: moving 2s infinite 0ms ;
}
.all_top_second{
background-color: rgb(0,128,0);
margin-right: 80px;
animation: moving 2s infinite 100ms ;
}
.all_top_third{
background-color: rgb(255,192,103);
margin-right: 80px;
animation: moving 2s infinite 200ms ;
}
.all_top_fouth{
background-color: rgb(173,255,47);
margin-right: 80px;
animation: moving 2s infinite 300ms ;
}
.all_top_fifth{
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);
}
}
