Html
    Css
    Js

    
                        
    /*
 *  Usage:*
      
* */ .sk-cube-grid { width:40px; height:40px; margin:40px auto; /* * Spinner positions * 1 2 3 * 4 5 6 * 7 8 9 */ } .sk-cube-grid .sk-cube { width:33.33%; height:33.33%; background-color:blue; float:left; -webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } .sk-cube-grid .sk-cube1 { -webkit-animation-delay:0.2s; animation-delay:0.2s; } .sk-cube-grid .sk-cube2 { -webkit-animation-delay:0.3s; animation-delay:0.3s; } .sk-cube-grid .sk-cube3 { -webkit-animation-delay:0.4s; animation-delay:0.4s; } .sk-cube-grid .sk-cube4 { -webkit-animation-delay:0.1s; animation-delay:0.1s; } .sk-cube-grid .sk-cube5 { -webkit-animation-delay:0.2s; animation-delay:0.2s; } .sk-cube-grid .sk-cube6 { -webkit-animation-delay:0.3s; animation-delay:0.3s; } .sk-cube-grid .sk-cube7 { -webkit-animation-delay:0.0s; animation-delay:0.0s; } .sk-cube-grid .sk-cube8 { -webkit-animation-delay:0.1s; animation-delay:0.1s; } .sk-cube-grid .sk-cube9 { -webkit-animation-delay:0.2s; animation-delay:0.2s; } @-webkit-keyframes sk-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 sk-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); } }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

css等待特效(原创)

等待代码 最简单 拆分在页面中

0