弹跳条

.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...