您现在的位置是：网站首页> 编程资料编程资料

CSS3轻松实现清新 Loading 效果的简单实例_css3_CSS_网页制作_

2023-11-11 333人已围观

简介 下面小编就为大家带来一篇CSS3轻松实现清新 Loading 效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

第一种效果：

loading01

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

第二种效果：

loading02

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{   

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网