网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )

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

第一种效果:

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

HTML部分

 

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.      <span></span>  
  3.      <span></span>  
  4.      <span></span>  
  5.      <span></span>  
  6.      <span></span>  
  7. </div>  

CSS3部分

CSS Code复制内容到剪贴板
  1. .loading{   
  2.      width: 80px;   
  3.      height: 40px;   
  4.      margin: 0 auto;   
  5.      margin-top:100px;   
  6.  }   
  7.  .loading span{   
  8.      display: inline-block;   
  9.      width: 8px;   
  10.      height: 100%;   
  11.      border-radius: 4px;   
  12.      background: lightgreen;   
  13.      -webkit-animation: load 1s ease infinite;   
  14.  }   
  15.  @-webkit-keyframes load{   
  16.      0%,100%{   
  17.          height: 40px;   
  18.          background: lightgreen;   
  19.      }   
  20.      50%{   
  21.          height: 70px;   
  22.          margin: -15px 0;   
  23.          background: lightblue;   
  24.      }   
  25.  }   
  26.  .loading span:nth-child(2){   
  27.      -webkit-animation-delay:0.2s;   
  28.  }   
  29.  .loading span:nth-child(3){   
  30.      -webkit-animation-delay:0.4s;   
  31.  }   
  32.  .loading span:nth-child(4){   
  33.      -webkit-animation-delay:0.6s;   
  34.  }   
  35.  .loading span:nth-child(5){   
  36.      -webkit-animation-delay:0.8s;   
  37.  }  

第二种效果:

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

HTML部分

XML/HTML Code复制内容到剪贴板
  1. <div class="loadEffect">  
  2.      <span></span>  
  3.      <span></span>  
  4.      <span></span>  
  5.      <span></span>  
  6.      <span></span>  
  7.      <span></span>  
  8.      <span></span>  
  9.      <span></span>  
  10. </div>  

CSS3部分

CSS Code复制内容到剪贴板
  1. .loadEffect{   
  2.     width: 100px;   
  3.     height: 100px;   
  4.     position: relative;   
  5.     margin: 0 auto;   
  6.     margin-top:100px;   
  7.  }   
  8.  .loadEffect span{   
  9.     display: inline-block;   
  10.     width: 16px;   
  11.     height: 16px;   
  12.     border-radius: 50%;   
  13.     background: lightgreen;   
  14.     position: absolute;   
  15.     -webkit-animation: load 1.04s ease infinite;   
  16.  }   
  17.  @-webkit-keyframes load{   
  18.     0%{   
  19.        opacity: 1;   
  20.     }   
  21.     100%{   
  22.        opacity: 0.2;   
  23.     }   
  24.  }   
  25.  .loadEffect span:nth-child(1){   
  26.     left: 0;   
  27.     top: 50%;   
  28.     margin-top:-8px;   
  29.     -webkit-animation-delay:0.13s;   
  30.  }   
  31.  .loadEffect span:nth-child(2){   
  32.     left: 14px;   
  33.     top: 14px;   
  34.     -webkit-animation-delay:0.26s;   
  35.  }   
  36.  .loadEffect span:nth-child(3){   
  37.     left: 50%;   
  38.     top: 0;   
  39.     margin-left: -8px;   
  40.     -webkit-animation-delay:0.39s;   
  41.  }   
  42.  .loadEffect span:nth-child(4){   
  43.     top: 14px;   
  44.     rightright:14px;   
  45.     -webkit-animation-delay:0.52s;   
  46.  }   
  47.  .loadEffect span:nth-child(5){   
  48.     rightright: 0;   
  49.     top: 50%;   
  50.     margin-top:-8px;   
  51.     -webkit-animation-delay:0.65s;   
  52.  }   
  53.  .loadEffect span:nth-child(6){   
  54.     rightright: 14px;   
  55.     bottombottom:14px;   
  56.     -webkit-animation-delay:0.78s;   
  57.  }   
  58.  .loadEffect span:nth-child(7){   
  59.     bottombottom: 0;   
  60.     left: 50%;   
  61.     margin-left: -8px;   
  62.     -webkit-animation-delay:0.91s;   
  63.  }   
  64.  .loadEffect span:nth-child(8){   
  65.     bottombottom: 14px;   
  66.     left: 14px;   
  67.     -webkit-animation-delay:1.04s;   
  68.  }  

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

更多效果如下所示:

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

第三种loading效果

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

第四种loading效果

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

第五种loading效果

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

第六种loading效果

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

第七种loading效果

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

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

上一篇:CSS中的line-height行高属性学习教程
下一篇:CSS3制作精致的照片墙特效
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?