loading动画

    
    
    


    

        

        

        

        

        

        
loading...
    

css:
*{
    padding: 0;
    margin:0;
}
.outer{
    width: 600px;
    height: 200px;
    border: 2px solid black;
    margin: 20px auto;
    overflow: hidden;
    text-align: center;
}
.inner1{
    display: inline-block;
    width: 60px;
    height: 100px;
    background-color: red;
    margin: 30px 15px;
    border-radius: 15px ;
    animation: jump 1s ease infinite;
}
.inner2{
    display: inline-block;
    width: 60px;
    height: 100px;
    background-color: green;
    margin: 30px 15px;
    border-radius: 15px ;
    animation: jump 1s ease 50ms infinite;
}
.inner3{
    display: inline-block;
    width: 60px;
    height: 100px;
    background-color: pink;
    margin: 30px 15px;
    border-radius: 15px ;
    animation: jump 1s ease 100ms infinite;
}
.inner4{
    display: inline-block;
    width: 60px;
    height: 100px;
    background-color: yellowgreen;
    margin: 30px 15px;
    border-radius: 15px ;
    animation: jump 1s ease 150ms infinite;
}
.inner5{
    display: inline-block;
    width: 60px;
    height: 100px;
    background-color: skyblue;
    margin: 30px 15px; 
    border-radius: 15px ;
    animation: jump 1s ease 200ms infinite;
}

p{
    margin:  0 auto; 
}
@keyframes  jump{
    from{
        transform: scaleY(1);
    }
    50%{
        transform: scaleY(0.5);
    }
    100%{
        transform: scaleY(1);
    }
}

效果图：

image.png