css等待特效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css等待特效</title>
    </head>
    <style type="text/css">
        .load-cube-grid {
            width:40px;
            height:40px;
        }
        /*ease-in-out 以慢速开始和结束的过渡效果*/
        .load-cube-grid .load-cube {
            width:33.33%;
            height:33.33%;
            background-color:skyblue;
            float:left;
            animation:load-cubeAnimate 1.5s infinite ease-in-out;
        }
        .load-cube-grid .load-cube1 {
            -webkit-animation-delay:0.2s;
            animation-delay:0.2s;
        }
        .load-cube-grid .load-cube2 {
            -webkit-animation-delay:0.3s;
            animation-delay:0.3s;
        }
        .load-cube-grid .load-cube3 {
            -webkit-animation-delay:0.4s;
            animation-delay:0.4s;
        }
        .load-cube-grid .load-cube4 {
            -webkit-animation-delay:0.1s;
            animation-delay:0.1s;
        }
        .load-cube-grid .load-cube5 {
            -webkit-animation-delay:0.2s;
            animation-delay:0.2s;
        }
        .load-cube-grid .load-cube6 {
            -webkit-animation-delay:0.3s;
            animation-delay:0.3s;
        }
        .load-cube-grid .load-cube7 {
            -webkit-animation-delay:0.0s;
            animation-delay:0.0s;
        }
        .load-cube-grid .load-cube8 {
            -webkit-animation-delay:0.1s;
            animation-delay:0.1s;
        }
        .load-cube-grid .load-cube9 {
            -webkit-animation-delay:0.2s;
            animation-delay:0.2s;
        }
        
        /*scale3D  X、Y、Z方向上  3D缩放效果 */
        @keyframes load-cubeAnimate {
            0%{
                -webkit-transform:scale3D(1,1,1);
                transform:scale3D(1,1,1);
            }
            
            50% {
                -webkit-transform:scale3D(0,0,1);
                transform:scale3D(0,0,1);
            }
            
            100% {
                -webkit-transform:scale3D(1,1,1);
                transform:scale3D(1,1,1);
            }
        }
    </style>
    <body>
        <div class="load-cube-grid">
        <div class="load-cube load-cube1"></div>
        <div class="load-cube load-cube2"></div>
        <div class="load-cube load-cube3"></div>
        <div class="load-cube load-cube4"></div>
        <div class="load-cube load-cube5"></div>
        <div class="load-cube load-cube6"></div>
        <div class="load-cube load-cube7"></div>
        <div class="load-cube load-cube8"></div>
        <div class="load-cube load-cube9"></div>
    </div>
    </body>
</html>
效果：
猜你喜欢
