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);
        }
    }

    效果

    .

  • 相关阅读:
    设置了透明以后,会有严重残影
    “真正的工作不是说的天花乱坠”,Torvalds 说, “而是在于细节”(Torvalds 认为成功的项目都是99%的汗水和1%的创新)
    iOS和Android使用MQTT协议实现消息推送和即时通讯(替代XMPP,已经有TMS MQTT)
    avalonjs1.5 入门教程
    Grunt 之 Connect
    性能
    JQUERY省、市、县城市联动选择
    Meteor全栈开发平台
    微型工作流引擎设计
    微型工作流引擎-功能设计
  • 原文地址:https://www.cnblogs.com/fqh123/p/12784854.html
Copyright © 2011-2022 走看看