<!DOCTYpe html>
<html>
<head>
<meta charset="utf-8">
<title>2019-04-02日作业</title>
<style>
.a1{
width:200px;
height:180px;
margin:0 auto;
border:1px solid #000 ;
}
.a1>div{
width:20px;
height:50px;
border-radius:5px;
float:left;
margin:10px;
}
.a1 div:nth-child(1){
background:red;
animation:loading 500ms ease 0s infinite alternate;
}
.a1 div:nth-child(2){
background:blue;
animation:loading 500ms ease 0.5s infinite alternate;
}
.a1 div:nth-child(3){
background:green;
animation:loading 500ms ease 1s infinite alternate;
}
.a1 div:nth-child(4){
background:pink;
animation:loading 500ms ease 1.5s infinite alternate;
}
.a1 div:nth-child(5){
background:orange;
animation:loading 500ms ease 2s infinite alternate;
}
@-webkit-keyframes loading{
from{
transform:scaleY(1);
}
to{
transform:scaleY(0.5);
}
}
.a1>p{
text-align:center;}
</style>
</head>
<body>
<div class="a1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Loading......</p>
</div>
</body>
</html>
网友评论