代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
<link rel="stylesheet" href="loding.css">
</head>
<body>
<div class="box">
<ul>
<li>
<div class="box1"></div>
</li>
<li>
<div class="box2"></div>
</li>
<li>
<div class="box3"></div>
</li>
<li>
<div class="box4"></div>
</li>
<li>
<div class="box5"></div>
</li>
</ul>
<div class="box6">
<ul>
<li>
<P>loading....</P>
</li>
</ul>
</div>
</div>
</body>
</html>
样式
.box{
width: 500px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
}
ul{
width: 50px;
height: 50px;
line-height: 50px;
list-style: none;
position: relative;
float: left;
margin: 0 auto;
top:20px;
right: 10px;
transform: scale(0.5) ;
transition: all ease;
animation: bolock 0.5s ease 1s infinite alternate both;
}
ul .box1{
background-color:red;
animation: bolock 0.7s ease 1s infinite alternate both;
line-height: 50px;
}
ul .box2{
background-color:gold;
position: absolute;
left: 136px;
bottom:0px;
width: 50px;
animation: bolock 0.9s ease 1s infinite alternate both;
line-height: 50px;
}
ul .box3{
background-color:blue;
position: absolute;
left: 236px;
bottom:0px;
width: 50px;
animation: bolock 1.1s ease 1s infinite alternate both;
line-height: 50px;
}
ul .box4{
background-color:pink;
position: absolute;
left: 336px;
bottom:0px;
width: 50px;
animation: bolock 1.3s ease 1s infinite alternate both;
line-height: 50px;
}
ul .box5{
background-color:yellow;
position: absolute;
left: 436px;
bottom:0px;
width: 50px;
animation: bolock 1.5s ease 1s infinite alternate both;
line-height: 50px;
}
.box6{
position: absolute;
left: 550px;
top:100px;
font-size: 25px;
display: block;
}
@keyframes bolock{
from{
height: 150px;
}
to{
height: 200px;
}
}
