loding ... 样式操作
2018-10-25 本文已影响0人
鬼会画符
<!DOCTYPE html>
<html>
<head>
<title>loding</title>
<meta charset="utf-8">
<style type="text/css" >
*{
margin:0;
padding:0;
}
.z{
margin:auto;
margin-top:100px;
width: 326px;
height: 154px;
background-color:beige;
}
.zz{
margin-top:12px;
margin-left: 12px;
width: 301px;
height: 125px;
border:1px solid black;
float: left;
}
.zx{
width: 301px;
height: 100px;
list-style: none;
background-color:white;
}
.zx>li{
width: 30px;
height: 36px;
margin-top:32px;
margin-left: 15px;
margin-right:15px;
border-radius: 20%;
float: left;
}
.zx1{
background-color:red;
animation: a 0.5s ease 100ms infinite alternate;
}
.zx2{
background-color:yellow;
animation: a 0.5s ease 300ms infinite alternate;
}
.zx3{
background-color:blue;
animation: a 0.5s ease 500ms infinite alternate;
/*name 动画完成时间 运动曲线 延时 重复 轮流反方向播放 */
}
.zx4{
background-color:green;
animation: a 0.5s ease 700ms infinite alternate;
}
.zx5{
background-color:khaki;
animation: a 0.5s ease 900ms infinite alternate;
}
@keyframes a{
0%{
}
100%{
transform:scale(1.2,1.5);
}
}
.zy{
width: 301px;
height: 23px;
font-size:16px;
padding-top:2px;
text-align:center;
background-color:white;
}
</style>
</head>
<body>
<div class="z">
<div class="zz">
<div class="zx">
<li class="zx1"></li>
<li class="zx2"></li>
<li class="zx3"></li>
<li class="zx4"></li>
<li class="zx5"></li>
</div>
<div class="zy">loding ...</div>
</div>
</div>
</body>
</html>
