CSS3轻松实现清新 Loading 效果

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

第一种效果：

HTML部分

<div class="loading">      <span></span>      <span></span>      <span></span>      <span></span>      <span></span> </div>

CSS3部分

.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部分

<div class="loadEffect">      <span></span>      <span></span>      <span></span>      <span></span>      <span></span>      <span></span>      <span></span>      <span></span> </div>

CSS3部分

.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;     right:14px;     -webkit-animation-delay:0.52s;  }  .loadEffect span:nth-child(5){     right: 0;     top: 50%;     margin-top:-8px;     -webkit-animation-delay:0.65s;  }  .loadEffect span:nth-child(6){     right: 14px;     bottom:14px;     -webkit-animation-delay:0.78s;  }  .loadEffect span:nth-child(7){     bottom: 0;     left: 50%;     margin-left: -8px;     -webkit-animation-delay:0.91s;  }  .loadEffect span:nth-child(8){     bottom: 14px;     left: 14px;     -webkit-animation-delay:1.04s;  }

上面这两个都是大家常用的加载效果，下面的就不依依的现实代码了，有需要的小伙伴请点击小月博客！

======================================

更多资源请点击： http://www.aliyue.net

=======================================

更多效果如下所示：

第三种loading效果

第四种loading效果

第五种loading效果

第六种loading效果

第七种loading效果

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