动态效果图
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.border{
width:600px;
height:300px;
border:2px solid #000000;
margin:100px auto;
}
.border ul{
list-style:none;/*去除项目符号*/
}
.ma1{
width:49px;
height:85px;
background-color:yellow;
float:left;
margin-right:63px;
margin-top:75px;/*盒子的上下居中*/
animation:moving 1.5s ease 200ms infinite alternate;/*alternate 原路返回*/
border-radius:13px 13px 13px 13px;
}
.ma2{
width:49px;
height:85px;
background-color:red;
float:left;
margin-top:75px;
margin-right:63px;
animation:moving 1.5s ease 300ms infinite alternate;
border-radius:13px 13px 13px 13px;
}
.ma3{
width:49px;
height:85px;
background-color:green;
float:left;
margin-top:75px;
margin-right:63px;
animation:moving 1.5s ease 400ms infinite alternate;
border-radius:13px 13px 13px 13px;
}
.ma4{
width:49px;
height:85px;
background-color:mediumorchid;
float:left;
margin-top:75px;
margin-right:63px;
transform-style:preserve-3d;
animation:moving 1.5s ease 500ms infinite alternate;
border-radius:13px 13px 13px 13px;
}
.ma5{
width:49px;
height:85px;
background-color:darkturquoise;
float:left;
margin-top:75px;
animation:moving 1.5s ease 600ms infinite alternate;
border-radius:13px 13px 13px 13px;
}
@keyframes moving {
0%{
transform:scaleY(0.5);
}
50%{
transform:scaleY(1);
}
100%{
transform:scaleY(0.5);
}
}
.ziti{
margin:260px auto;
text-align:center;
font:bold 17px '微软雅黑';
}
</style>
</head>
<body>
<div class="border">
<ul>
<li class="ma1"></li>
<li class="ma2"></li>
<li class="ma3"></li>
<li class="ma4"></li>
<li class="ma5"></li>
</ul>
<ul>
<li class="ziti">loading...</li>
</ul>
</div>
</body>
</html>
网友评论