茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
    • 

    <sub id="ddbnn"><ol id="ddbnn"></ol></sub>
  • 

    <legend id="ddbnn"></legend><s id="ddbnn"></s>
    

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果
    
            
    來源：易賢網(wǎng)  閱讀：2442 次  日期：2014-07-07 20:34:57 
    
            
    溫馨提示：易賢網(wǎng)小編為您整理了“純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果”,方便廣大網(wǎng)友查閱！
    
            
    
                        
    
            
    
             
    這篇文章主要介紹了純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果,效果簡(jiǎn)潔、超酷、符合當(dāng)前前端的流行風(fēng)格,需要的朋友可以參考下。
    效果如圖：
    名單
    HTML代碼部分（所有效果共用）：
    代碼如下:
    <divclass="loader">加載中...</div>
    我們從左到右從上到下列出效果對(duì)應(yīng)的CSS代碼。
    1#效果CSS代碼：
    代碼如下:
    .load1.loader,
    .load1.loader:before,
    .load1.loader:after{
    background:#FFF;
    -webkit-animation:load11sinfiniteease-in-out;
    animation:load11sinfiniteease-in-out;
    width:1em;
    height:4em;
    }
    .load1.loader:before,
    .load1.loader:after{
    position:absolute;
    top:0;
    content:'';
    }
    .load1.loader:before{
    left:-1.5em;
    }
    .load1.loader{
    text-indent:-9999em;
    margin:40%auto;
    position:relative;
    font-size:11px;
    -webkit-animation-delay:0.16s;
    animation-delay:0.16s;
    }
    .load1.loader:after{
    left:1.5em;
    -webkit-animation-delay:0.32s;
    animation-delay:0.32s;
    }
    @-webkit-keyframesload1{
    0%,
    80%,
    100%{
    box-shadow:00#FFF;
    height:4em;
    }
    40%{
    box-shadow:0-2em#ffffff;
    height:5em;
    }
    }
    @keyframesload1{
    0%,
    80%,
    100%{
    box-shadow:00#FFF;
    height:4em;
    }
    40%{
    box-shadow:0-2em#ffffff;
    height:5em;
    }
    }
    2#效果CSS代碼：
    代碼如下:
    .load2.loader,
    .load2.loader:before,
    .load2.loader:after{
    border-radius:50%;
    }
    .load2.loader:before,
    .load2.loader:after{
    position:absolute;
    content:'';
    }
    .load2.loader:before{
    width:5.2em;
    height:10.2em;
    background:#0dcecb;
    border-radius:10.2em0010.2em;
    top:-0.1em;
    left:-0.1em;
    -webkit-transform-origin:5.2em5.1em;
    transform-origin:5.2em5.1em;
    -webkit-animation:load22sinfiniteease1.5s;
    animation:load22sinfiniteease1.5s;
    }
    .load2.loader{
    font-size:11px;
    text-indent:-99999em;
    margin:30%auto;
    position:relative;
    width:10em;
    height:10em;
    box-shadow:inset0001em#FFF;
    }
    .load2.loader:after{
    width:5.2em;
    height:10.2em;
    background:#0dcecb;
    border-radius:010.2em10.2em0;
    top:-0.1em;
    left:5.1em;
    -webkit-transform-origin:0px5.1em;
    transform-origin:0px5.1em;
    -webkit-animation:load22sinfiniteease;
    animation:load22sinfiniteease;
    }
    @-webkit-keyframesload2{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    }
    @keyframesload2{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    }
    3#效果CSS代碼：
    代碼如下:
    .load3.loader{
    font-size:10px;
    margin:30%auto;
    text-indent:-9999em;
    width:11em;
    height:11em;
    border-radius:50%;
    background:#ffffff;
    background:-moz-linear-gradient(left,#ffffff10%,rgba(255,255,255,0)42%);
    background:-webkit-linear-gradient(left,#ffffff10%,rgba(255,255,255,0)42%);
    background:-o-linear-gradient(left,#ffffff10%,rgba(255,255,255,0)42%);
    background:-ms-linear-gradient(left,#ffffff10%,rgba(255,255,255,0)42%);
    background:linear-gradient(toright,#ffffff10%,rgba(255,255,255,0)42%);
    position:relative;
    -webkit-animation:load31.4sinfinitelinear;
    animation:load31.4sinfinitelinear;
    }
    .load3.loader:before{
    width:50%;
    height:50%;
    background:#FFF;
    border-radius:100%000;
    position:absolute;
    top:0;
    left:0;
    content:'';
    }
    .load3.loader:after{
    background:#0dcecb;
    width:75%;
    height:75%;
    border-radius:50%;
    content:'';
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    }
    @-webkit-keyframesload3{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    }
    @keyframesload3{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    }
    4#效果CSS代碼：
    代碼如下:
    .load4.loader{
    font-size:20px;
    margin:45%auto;
    width:1em;
    height:1em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load41.3sinfinitelinear;
    animation:load41.3sinfinitelinear;
    }
    @-webkit-keyframesload4{
    0%,
    100%{
    box-shadow:0em-3em0em0.2em#ffffff,2em-2em00em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em00em#ffffff;
    }
    12.5%{
    box-shadow:0em-3em0em0em#ffffff,2em-2em00.2em#ffffff,3em0em00em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    25%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em00em#ffffff,3em0em00.2em#ffffff,2em2em00em#ffffff,0em3em0-0.5em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    37.5%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em00em#ffffff,2em2em00.2em#ffffff,0em3em00em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    50%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em00em#ffffff,0em3em00.2em#ffffff,-2em2em00em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    62.5%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em00em#ffffff,-2em2em00.2em#ffffff,-3em0em00em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    75%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em00em#ffffff,-3em0em00.2em#ffffff,-2em-2em00em#ffffff;
    }
    87.5%{
    box-shadow:0em-3em0em0em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em00em#ffffff,-3em0em00em#ffffff,-2em-2em00.2em#ffffff;
    }
    }
    @keyframesload4{
    0%,
    100%{
    box-shadow:0em-3em0em0.2em#ffffff,2em-2em00em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em00em#ffffff;
    }
    12.5%{
    box-shadow:0em-3em0em0em#ffffff,2em-2em00.2em#ffffff,3em0em00em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    25%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em00em#ffffff,3em0em00.2em#ffffff,2em2em00em#ffffff,0em3em0-0.5em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    37.5%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em00em#ffffff,2em2em00.2em#ffffff,0em3em00em#ffffff,-2em2em0-0.5em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    50%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em00em#ffffff,0em3em00.2em#ffffff,-2em2em00em#ffffff,-3em0em0-0.5em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    62.5%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em00em#ffffff,-2em2em00.2em#ffffff,-3em0em00em#ffffff,-2em-2em0-0.5em#ffffff;
    }
    75%{
    box-shadow:0em-3em0em-0.5em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em00em#ffffff,-3em0em00.2em#ffffff,-2em-2em00em#ffffff;
    }
    87.5%{
    box-shadow:0em-3em0em0em#ffffff,2em-2em0-0.5em#ffffff,3em0em0-0.5em#ffffff,2em2em0-0.5em#ffffff,0em3em0-0.5em#ffffff,-2em2em00em#ffffff,-3em0em00em#ffffff,-2em-2em00.2em#ffffff;
    }
    }
    5#效果CSS代碼：
    代碼如下:
    .load5.loader{
    margin:46%auto;
    font-size:25px;
    width:1em;
    height:1em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load51.1sinfiniteease;
    animation:load51.1sinfiniteease;
    }
    @-webkit-keyframesload5{
    0%,
    100%{
    box-shadow:0em-2.6em0em0em#ffffff,1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.5),-1.8em-1.8em00emrgba(255,255,255,0.7);
    }
    12.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.7),1.8em-1.8em00em#ffffff,2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.5);
    }
    25%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.5),1.8em-1.8em00emrgba(255,255,255,0.7),2.5em0em00em#ffffff,1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    37.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.5),2.5em0em00emrgba(255,255,255,0.7),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    50%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.5),1.75em1.75em00emrgba(255,255,255,0.7),0em2.5em00em#ffffff,-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    62.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.5),0em2.5em00emrgba(255,255,255,0.7),-1.8em1.8em00em#ffffff,-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    75%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.5),-1.8em1.8em00emrgba(255,255,255,0.7),-2.6em0em00em#ffffff,-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    87.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.5),-2.6em0em00emrgba(255,255,255,0.7),-1.8em-1.8em00em#ffffff;
    }
    }
    @keyframesload5{
    0%,
    100%{
    box-shadow:0em-2.6em0em0em#ffffff,1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.5),-1.8em-1.8em00emrgba(255,255,255,0.7);
    }
    12.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.7),1.8em-1.8em00em#ffffff,2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.5);
    }
    25%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.5),1.8em-1.8em00emrgba(255,255,255,0.7),2.5em0em00em#ffffff,1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    37.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.5),2.5em0em00emrgba(255,255,255,0.7),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    50%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.5),1.75em1.75em00emrgba(255,255,255,0.7),0em2.5em00em#ffffff,-1.8em1.8em00emrgba(255,255,255,0.2),-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    62.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.5),0em2.5em00emrgba(255,255,255,0.7),-1.8em1.8em00em#ffffff,-2.6em0em00emrgba(255,255,255,0.2),-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    75%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.5),-1.8em1.8em00emrgba(255,255,255,0.7),-2.6em0em00em#ffffff,-1.8em-1.8em00emrgba(255,255,255,0.2);
    }
    87.5%{
    box-shadow:0em-2.6em0em0emrgba(255,255,255,0.2),1.8em-1.8em00emrgba(255,255,255,0.2),2.5em0em00emrgba(255,255,255,0.2),1.75em1.75em00emrgba(255,255,255,0.2),0em2.5em00emrgba(255,255,255,0.2),-1.8em1.8em00emrgba(255,255,255,0.5),-2.6em0em00emrgba(255,255,255,0.7),-1.8em-1.8em00em#ffffff;
    }
    }
    6#效果CSS代碼：
    代碼如下:
    .load6.loader{
    font-size:90px;
    text-indent:-9999em;
    overflow:hidden;
    width:1em;
    height:1em;
    border-radius:50%;
    margin:33%auto;
    position:relative;
    -webkit-animation:load61.7sinfiniteease;
    animation:load61.7sinfiniteease;
    }
    @-webkit-keyframesload6{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.11em-0.83em0-0.42em#ffffff,-0.11em-0.83em0-0.44em#ffffff,-0.11em-0.83em0-0.46em#ffffff,-0.11em-0.83em0-0.477em#ffffff;
    }
    5%,
    95%{
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.11em-0.83em0-0.42em#ffffff,-0.11em-0.83em0-0.44em#ffffff,-0.11em-0.83em0-0.46em#ffffff,-0.11em-0.83em0-0.477em#ffffff;
    }
    30%{
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.51em-0.66em0-0.42em#ffffff,-0.75em-0.36em0-0.44em#ffffff,-0.83em-0.03em0-0.46em#ffffff,-0.81em0.21em0-0.477em#ffffff;
    }
    55%{
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.29em-0.78em0-0.42em#ffffff,-0.43em-0.72em0-0.44em#ffffff,-0.52em-0.65em0-0.46em#ffffff,-0.57em-0.61em0-0.477em#ffffff;
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.11em-0.83em0-0.42em#ffffff,-0.11em-0.83em0-0.44em#ffffff,-0.11em-0.83em0-0.46em#ffffff,-0.11em-0.83em0-0.477em#ffffff;
    }
    }
    @keyframesload6{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.11em-0.83em0-0.42em#ffffff,-0.11em-0.83em0-0.44em#ffffff,-0.11em-0.83em0-0.46em#ffffff,-0.11em-0.83em0-0.477em#ffffff;
    }
    5%,
    95%{
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.11em-0.83em0-0.42em#ffffff,-0.11em-0.83em0-0.44em#ffffff,-0.11em-0.83em0-0.46em#ffffff,-0.11em-0.83em0-0.477em#ffffff;
    }
    30%{
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.51em-0.66em0-0.42em#ffffff,-0.75em-0.36em0-0.44em#ffffff,-0.83em-0.03em0-0.46em#ffffff,-0.81em0.21em0-0.477em#ffffff;
    }
    55%{
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.29em-0.78em0-0.42em#ffffff,-0.43em-0.72em0-0.44em#ffffff,-0.52em-0.65em0-0.46em#ffffff,-0.57em-0.61em0-0.477em#ffffff;
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    box-shadow:-0.11em-0.83em0-0.4em#ffffff,-0.11em-0.83em0-0.42em#ffffff,-0.11em-0.83em0-0.44em#ffffff,-0.11em-0.83em0-0.46em#ffffff,-0.11em-0.83em0-0.477em#ffffff;
    }
    }
    7#效果CSS代碼：
    代碼如下:
    .load7.loader:before,
    .load7.loader:after,
    .load7.loader{
    border-radius:50%;
    width:2.5em;
    height:2.5em;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation:load71.8sinfiniteease-in-out;
    animation:load71.8sinfiniteease-in-out;
    }
    .load7.loader{
    margin:8emauto;
    font-size:10px;
    position:relative;
    text-indent:-9999em;
    -webkit-animation-delay:0.16s;
    animation-delay:0.16s;
    }
    .load7.loader:before{
    left:-3.5em;
    }
    .load7.loader:after{
    left:3.5em;
    -webkit-animation-delay:0.32s;
    animation-delay:0.32s;
    }
    .load7.loader:before,
    .loader:after{
    content:'';
    position:absolute;
    top:0;
    }
    @-webkit-keyframesload7{
    0%,
    80%,
    100%{
    box-shadow:02.5em0-1.3em#ffffff;
    }
    40%{
    box-shadow:02.5em00#FFF;
    }
    }
    @keyframesload7{
    0%,
    80%,
    100%{
    box-shadow:02.5em0-1.3em#ffffff;
    }
    40%{
    box-shadow:02.5em00#FFF;
    }
    }
    8#效果CSS代碼：
    代碼如下:
    .load8.loader{
    margin:6emauto;
    font-size:10px;
    position:relative;
    text-indent:-9999em;
    border-top:1.1emsolidrgba(255,255,255,0.2);
    border-right:1.1emsolidrgba(255,255,255,0.2);
    border-bottom:1.1emsolidrgba(255,255,255,0.2);
    border-left:1.1emsolid#ffffff;
    -webkit-animation:load81.1sinfinitelinear;
    animation:load81.1sinfinitelinear;
    }
    .load8.loader,
    .load8.loader:after{
    border-radius:50%;
    width:10em;
    height:10em;
    }
    @-webkit-keyframesload8{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    }
    @keyframesload8{
    0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    }
    

    更多信息請(qǐng)查看IT技術(shù)專欄
                
    
            
    
                        
    
            
    更多信息請(qǐng)查看網(wǎng)頁(yè)制作
    
            
    
            
            
            
            
    易賢網(wǎng)手機(jī)網(wǎng)站地址：純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果
    
            
    由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！
    
            
    
                
    相關(guān)閱讀網(wǎng)頁(yè)制作
    
                                
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                          
    
        
    
    
    
    
    
        

					
		
    
		
    
            
    
                
    2026國(guó)考·省考課程試聽報(bào)名
    
                
      

                    
    • 
                        報(bào)班類型
                        
                    
      • 
                    
    • 
                        姓名
                        
                    
      • 
                    
    • 
                        手機(jī)號(hào)
                        
                    
      • 
                    
    • 
                        驗(yàn)證碼
                        
                        
                    
      • 
                    
    • 
                        
						
                        
                    
      • 
                
    
            
    
        
    
		
    
        

        
    
    
    
    
    

    

    

    


    
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助
    | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 |  新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn)  | 投訴建議 

    

    
     工業(yè)和信息化部備案號(hào)：滇ICP備2023014141號(hào)-1
    云南省教育廳備案號(hào)：云教ICP備0901021
    滇公網(wǎng)安備53010202001879號(hào) 
    人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號(hào)

    

    
    
    
        云南網(wǎng)警備案專用圖標(biāo)
    
    
    
    
        聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào)：hfpxwx 
    
    咨詢QQ：1093837350（9:00—18:00）版權(quán)所有:易賢網(wǎng)
    
    
    
    
        云南網(wǎng)警報(bào)警專用圖標(biāo)