CSS3动画效果

CSS3加载动画loading

代码如下

.spinner{
        margin:100px auto;
        width:60px;
        height:60px;
        text-align:center;
        font-size:10px;
        }
    .spinner > div{
        background-color:#67cf22;
        height:100%;
        width:6px;
        display:inline-block;
        animation:stretchdelay 1.2s infinite ease-in-out;
        -webkit-animation:stretchdelay 1.2s infinite ease-in-out;
        }
        .spinner .rect2 {
              -webkit-animation-delay: -1.1s;
              animation-delay: -1.1s;
        }
        .spinner .rect3 {
              -webkit-animation-delay: -1.0s;
              animation-delay: -1.0s;
        }
        .spinner .rect4 {
              -webkit-animation-delay: -0.9s;
              animation-delay: -0.9s;
        }
        .spinner .rect5 {
              -webkit-animation-delay: -0.8s;
              animation-delay: -0.8s;
        }
        
     @keyframes stretchdelay{
        0%, 40% , 100% {
            transform:scaleY(0.4);
            -webkit-transform:scaleY(0.4);
            } 20%{
                transform:scaleY(1);
                -webkit-transform:scaleY(1);
                }
         
        }
        
        .yuan{
            width:50px;
            height:50px;
            background-color:#333;
            border-radius: 100%; 
            margin:0 auto;
            animation:yuan 1.0s infinite ease-in-out;
            -webkit-animation:yuan 1.0s infinite ease-in-out;
            
            }
            @keyframes yuan{
                0% {
                    transform:scale(0.0);
                    -webkit-transform:scale(0.0);
                    }
                100%{
                    transform:scale(1.0);
                    -webkit-transform:scale(1.0);
                    opacity:0;
                    }
                
                }

html代码

<div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>

<div class="yuan"></div>