zoukankan      html  css  js  c++  java
  • 用css3动画做一个加载动效

    <!--  加载动效 -->
            <div id="myloader">
                <div class="loader">
                    <div class="grid">
                        <div class="cube cube1"></div>
                        <div class="cube cube2"></div>
                        <div class="cube cube3"></div>
                        <div class="cube cube4"></div>
                        <div class="cube cube5"></div>
                        <div class="cube cube6"></div>
                        <div class="cube cube7"></div>
                        <div class="cube cube8"></div>
                        <div class="cube cube9"></div>
                    </div>
                </div>
            </div>

    css

    #myloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1999; background: #F6F6F6; text-align: center;}
    #myloader .loader { display: inline-block; height: auto; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
    #myloader .loader .grid { width: 60px; height: 60px; margin: 100px auto;}
    #myloader .loader .grid .cube { width: 33%; height: 33%; background-color: #3367D6; float: left; -webkit-animation: cubeGridScaleDelay 1.3s infinite ease-in-out; animation: cubeGridScaleDelay 1.3s infinite ease-in-out; }
    #myloader .loader .grid .cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
    #myloader .loader .grid .cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
    #myloader .loader .grid .cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
    #myloader .loader .grid .cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
    #myloader .loader .grid .cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
    #myloader .loader .grid .cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
    #myloader .loader .grid .cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }
    #myloader .loader .grid .ube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
    #myloader .loader .grid .cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
     @-webkit-keyframes cubeGridScaleDelay {
        0%, 70%, 100% {
            -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
        }
        35% {
            -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
        }
    }
     @keyframes cubeGridScaleDelay {
        0%, 70%, 100% {
            -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
        }
        35% {
            -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
        }
    }

    效果

    .

  • 相关阅读:
    HTML与用户的交互 表单
    HTML区块元素与网页布局
    css清除浮动
    gulp 配置前端项目打包
    React Ntive 学习手记
    gulp 配置自动化前端开发
    HTML5调用手机相机拍照
    JQuery 1.8.3对IE9兼容问题getAttribute
    gruntJs篇之connect+watch自动刷新
    360安全浏览器浏览模式调整
  • 原文地址:https://www.cnblogs.com/fqh123/p/12784854.html
Copyright © 2011-2022 走看看