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

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

2021-09-13 1024人已围观

简介 下面小编就为大家带来一篇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{   
  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提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS中的line-height行高属性学习教程_CSS教程_CSS_网页制作_

    下一篇：CSS3制作精致的照片墙特效_css3_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网