缓冲
2018-10-25 本文已影响0人
白s圣诞节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载</title>
<style type="text/css">
.box{
width:302px;
height:125px;
border:1px solid black;
margin:0 auto;
}
.box h3{
width:68px;
height:17px;
margin:0 auto;
margin-top:95px;
/*margin-bottom:8px;*/
}
.box11{
width:30px;
height:36px;
background-color: #ff0000;
border-radius: 10px;
margin-left:15px;
margin-top:32px;
margin-bottom: 57px;
float:left;
/*transform: scale(0.5,2);*/
animation: moving 1s ease 0ms infinite;
}
/*@keyframes moving{
from{
height: 36px;
}
to{
height:72px;
height: -36px;
}*/
.box12{
width:30px;
height:36px;
background-color: #008100;
border-radius: 10px;
float:left;
margin-left:29px;
margin-top:32px;
animation: moving 1s ease 100ms infinite;
}
.box13{
width:30px;
height:36px;
background-color: #ffc1cb;
border-radius: 10px;
float:left;
margin-left:29px;
margin-top:32px;
animation: moving 1s ease 200ms infinite;
}
.box14{
width:30px;
height:36px;
background-color: #adff2e;
border-radius: 10px;
float:left;
margin-left:29px;
margin-top:32px;
animation: moving 1s ease 300ms infinite;
}
.box15{
width:30px;
height:36px;
background-color: #00ffff;
border-radius: 10px;
float:left;
margin-left:29px;
margin-top:32px;
animation: moving 1s ease 400ms infinite;
}
@keyframes moving{
from{
}
to{
/*缩放 (宽，高)*/
transform: scale(1,2);
}
</style>
</head>
<body>
<div class = "box">
<div class = "box11"></div>
<div class = "box12"></div>
<div class = "box13"></div>
<div class = "box14"></div>
<div class = "box15"></div>
<h3>loading...</h3>
</div>
</body>
</html>
image.png
