CSS3轻松实现清新Loading效果

CSS3轻松实现清新 Loading 效果

 

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

第一种效果:

loading01

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

第二种效果:

loading02

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

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

更多效果如下所示:

第三种loading效果

第三种loading效果

第四种loading效果

第四种loading效果

第五种loading效果

第五种loading效果

第六种loading效果

第六种loading效果

第七种loading效果

第七种loading效果

 

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

 

未经允许不得转载:小月博客 » CSS3轻松实现清新Loading效果
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

评论3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2
    代碼能給我,嗎
    22222018-06-06 16:07:58回复
  2. #1
    小月依旧棒棒哒!
    米粉2016-05-18 16:32:37回复
    • 脑残粉哦,好久不见
      小月2016-05-19 9:31:19回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏