CSS3轻松实现清新 Loading 效果的简单实例

至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。

第一种效果：

HTML部分

XML/HTML Code复制内容到剪贴板

<div class="loading">  

     <span></span>  

     <span></span>  

     <span></span>  

     <span></span>  

     <span></span>  

</div>  

CSS3部分

CSS Code复制内容到剪贴板

.loading{   

     width: 80px;   

     height: 40px;   

     margin: 0 auto;   

     margin-top:100px;   

 }   

 .loading span{   

     display: inline-block;   

     width: 8px;   

     height: 100%;   

     border-radius: 4px;   

     background: lightgreen;   

     -webkit-animation: load 1s ease infinite;   

 }   

 @-webkit-keyframes load{   

     0%,100%{   

         height: 40px;   

         background: lightgreen;   

     }   

     50%{   

         height: 70px;   

         margin: -15px 0;   

         background: lightblue;   

     }   

 }   

 .loading span:nth-child(2){   

     -webkit-animation-delay:0.2s;   

 }   

 .loading span:nth-child(3){   

     -webkit-animation-delay:0.4s;   

 }   

 .loading span:nth-child(4){   

     -webkit-animation-delay:0.6s;   

 }   

 .loading span:nth-child(5){   

     -webkit-animation-delay:0.8s;   

 }  

第二种效果：

HTML部分

XML/HTML Code复制内容到剪贴板

<div class="loadEffect">  

     <span></span>  

     <span></span>  

     <span></span>  

     <span></span>  

     <span></span>  

     <span></span>  

     <span></span>  

     <span></span>  

</div>  

CSS3部分

CSS Code复制内容到剪贴板

.loadEffect{   

    width: 100px;   

    height: 100px;   

    position: relative;   

    margin: 0 auto;   

    margin-top:100px;   

 }   

 .loadEffect span{   

    display: inline-block;   

    width: 16px;   

    height: 16px;   

    border-radius: 50%;   

    background: lightgreen;   

    position: absolute;   

    -webkit-animation: load 1.04s ease infinite;   

 }   

 @-webkit-keyframes load{   

    0%{   

       opacity: 1;   

    }   

    100%{   

       opacity: 0.2;   

    }   

 }   

 .loadEffect span:nth-child(1){   

    left: 0;   

    top: 50%;   

    margin-top:-8px;   

    -webkit-animation-delay:0.13s;   

 }   

 .loadEffect span:nth-child(2){   

    left: 14px;   

    top: 14px;   

    -webkit-animation-delay:0.26s;   

 }   

 .loadEffect span:nth-child(3){   

    left: 50%;   

    top: 0;   

    margin-left: -8px;   

    -webkit-animation-delay:0.39s;   

 }   

 .loadEffect span:nth-child(4){   

    top: 14px;   

    rightright:14px;   

    -webkit-animation-delay:0.52s;   

 }   

 .loadEffect span:nth-child(5){   

    rightright: 0;   

    top: 50%;   

    margin-top:-8px;   

    -webkit-animation-delay:0.65s;   

 }   

 .loadEffect span:nth-child(6){   

    rightright: 14px;   

    bottombottom:14px;   

    -webkit-animation-delay:0.78s;   

 }   

 .loadEffect span:nth-child(7){   

    bottombottom: 0;   

    left: 50%;   

    margin-left: -8px;   

    -webkit-animation-delay:0.91s;   

 }   

 .loadEffect span:nth-child(8){   

    bottombottom: 14px;   

    left: 14px;   

    -webkit-animation-delay:1.04s;   

 }  

上面这两个都是大家常用的加载效果，下面的就不依依的现实代码了，有需要的小伙伴请给我留言！

更多效果如下所示：

第三种loading效果

第四种loading效果

第五种loading效果

第六种loading效果

第七种loading效果

这些效果都是用CSS3实现的，是不是很厉害，想要学习的小伙伴记得给我留言哦！如果大家有更牛气的效果记得偷偷的发给我哦！

以上这篇CSS3轻松实现清新 Loading 效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!