css等待特效

最新推荐文章于 2022-10-30 12:29:59 发布

weixin_30938149

最新推荐文章于 2022-10-30 12:29:59 发布

阅读量194

点赞数

原文链接：http://www.cnblogs.com/suanshu/p/9289917.html

版权

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

效果：

转载于:https://www.cnblogs.com/suanshu/p/9289917.html

weixin_30938149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css等待特效

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css等待特效</title> </head> <style type="text/css"> ...
复制链接

扫一扫

css等待特效

“相关推荐”对你有帮助么？