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

前端  /  管理员 发布于 7年前   189

至今HTML5中国已经为大家分享过几百种基于 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.  }  

第二种效果：

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

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

更多效果如下所示：

第三种loading效果

第四种loading效果

第五种loading效果

第六种loading效果

第七种loading效果

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

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