loading 动画

html:

css:

.box1{
    width: 400px;
    height: 200px;
    margin: 150px auto 0;
    /*background-color: gold;*/
    border: 1px solid;
}
.box2{
    width: 50px;
    height: 150px;
    margin: 15px;
    float: left;
    border-radius: 20px;
}
#a{
    background-color: red;
    animation: moving 1s ease 0s infinite alternate both;
}
#b{
    background-color: blue;
    animation: moving 1s ease 0.2s infinite alternate both;
}
#c{
    background-color: pink;
    animation: moving 1s ease 0.4s infinite alternate both;
}
#d{
    background-color: green;
    animation: moving 1s ease 0.6s infinite alternate both;
}
#e{
    background-color: yellow;
    animation: moving 1s ease 0.8s infinite alternate both;
}
@keyframes moving{
    from{
        transform: scaleY(1);
    }
    to{
        transform: scaleY(0.5);
    }
}

效果图：

loading.png