CSS3轻松实现清新 Loading 效果

Posted 2020-07-29 守候幸福

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3轻松实现清新 Loading 效果相关的知识，希望对你有一定的参考价值。

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

第一种效果：

HTML部分

1 <div class="loading">
2      <span></span>
3      <span></span>
4      <span></span>
5      <span></span>
6      <span></span>
7 </div>

CSS3部分

.loading{
     width: 80px;
     height: 40px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 8px;
     height: 100%;
     border-radius: 4px;
     background: lightgreen;
     -webkit-animation: load 1s ease infinite;
 }
 @-webkit-keyframes load{
     0%,100%{
         height: 40px;
         background: lightgreen;
     }
     50%{
         height: 70px;
         margin: -15px 0;
         background: lightblue;
     }
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.2s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.4s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.6s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.8s;
 }

第二种效果：

HTML部分

<div class="loadEffect">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

CSS3部分

.loadEffect{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top:100px;
 }
 .loadEffect span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
 }
 @-webkit-keyframes load{
    0%{
       opacity: 1;
    }
    100%{
       opacity: 0.2;
    }
 }
 .loadEffect span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.13s;
 }
 .loadEffect span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
 }
 .loadEffect span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay:0.39s;
 }
 .loadEffect span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
 }
 .loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.65s;
 }
 .loadEffect span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
 }
 .loadEffect span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay:0.91s;
 }
 .loadEffect span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
 }

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

CSS3轻松实现清新 Loading 效果

第一种效果：

CSS3部分

第二种效果：

HTML部分

CSS3部分

更多效果如下所示：