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

CSS3实现10种Loading效果 详解纯CSS3制作的20种loading动效CSS3轻松实现清新 Loading 效果的简单实例使用CSS3制作饼状旋转载入效果的实例浅析与CSS3的loading动画加载相关的transition优化8款使用 CSS3 实现超炫的 Loading（加载）的动画效果纯CSS3实现的8种Loading动画效果使用css3实现超炫的loading加载动画效果css3如何绘制一个圆圆的loading转圈动画

2021-09-04 810人已围观

简介 这篇文章主要为大家详细介绍了CSS3实现10种Loading效果，效果实现简单新颖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：

代码如下：

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

第2种效果：

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span>span>  
  3. div>  
  4.   
CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width: 150px;   
  3.             height: 4px;   
  4.             border-radius: 2px;   
  5.             margin: 0 auto;   
  6.             margin-top:100px;   
  7.             position: relative;   
  8.             background: lightgreen;   
  9.             -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
  10.         }   
  11.         .loading span{   
  12.             display: inline-block;   
  13.             width: 16px;   
  14.             height: 16px;   
  15.             border-radius: 50%;   
  16.             background: lightgreen;   
  17.             position: absolute;   
  18.             margin-top: -7px;   
  19.             margin-left:-8px;   
  20.             -webkit-animation: changePosition 1.04s ease-in infinite alternate;   
  21.         }   
  22.         @-webkit-keyframes changeBgColor{   
  23.             0%{   
  24.                 background: lightgreen;   
  25.             }   
  26.             100%{   
  27.                 background: lightblue;   
  28.             }   
  29.         }   
  30.         @-webkit-keyframes changePosition{   
  31.             0%{   
  32.                 background: lightgreen;   
  33.             }   
  34.             100%{   
  35.                 margin-left: 142px;   
  36.                 background: lightblue;   
  37.             }   
  38.        &#

    上一篇：CSS3实现可爱的小黄人动画 CSS3实现的绵羊奔跑动画特效源码CSS3鼠标滑过图片标题遮罩动画特效源码 8种纯CSS3绘制打火机动画火焰效果纯CSS3实现鼠标滑过tip提示框动画特效源码html5+css3绘制的滚动齿轮动画特效源码纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码浅谈CSS3动画的回调处理

    下一篇：CSS3实现时间轴效果 前端css实现最基本的时间轴的示例代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网