login
.one{
width: 550px;
height: 300px;
margin:200px auto;
border:1px solid;
}
.two{
width: 550px;
height: 270px;
}
.ttt{
margin-right: 50px;
}
.qqq,.www,.eee,.rrr,.ttt{
width: 50px;
height: 90px;
margin: 80px 0px 80px 50px;
border-radius: 5px;
float: left;
}
.top .qqq{
background-color: #459;
animation: moving 1s ease infinite;
}
.top .www{
background-color: #D4A;
animation: moving 1s ease 100ms infinite;
}
.top .eee{
background-color: #a73;
animation: moving 1s ease 200ms infinite;
}
.top .rrr{
background-color: #982;
animation: moving 1s ease 300ms infinite;
}
.top .ttt{
background-color: #c73;
animation: moving 1s ease 400ms infinite;
}
.bottom{
text-align: center;
color: red;
font: bold 18px "微软雅黑";
}
@keyframes moving{
0%{
/*位移动画*/
transform: scaleY(0.2);
}
50%{
transform: scaleY(1.5);
}
100%{
transform: scaleY(0.2);
}
login...
<
html>
