CSS练习实现多种loading

One

核心代码:

.loading{
        width: 70px;
        height: 200px;
        margin: auto;
        display: flex;
    }
    .loading span{
        display: inline-block;
        width: 8px;
        height: 40px;
        border-radius: 4px;
        background: #91d5ff;
        margin: auto;
        -webkit-animation: load 1s ease infinite;
    }
    @-webkit-keyframes load{
        0%,100%{
            height: 40px;
            background: #91d5ff;
        }
        50%{
            height: 80px;
            background: #40a9ff;
        }
    }
    .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;
    }

jsfiddle传送门

Two

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:8px;
   background:#91d5ff;
   border-radius:4px;
   margin:auto;
   display: flex;
   align-items:center;
   -webkit-animation: load 1.2s ease-in-out infinite alternate;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  -webkit-animation: loadSpan 1.2s ease-in-out infinite alternate;
}

@-webkit-keyframes load{
  0%{
      background:#91d5ff;
  }  
  100%{
      background:#69c0ff;
    }
}

@-webkit-keyframes loadSpan{
  0%{
      background:#91d5ff;
  }  
  100%{
      margin-left:142px;
      background:#69c0ff;
    }
}

jsfiddle传送门

Three

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
    }
}

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

jsfiddle传送门

Four

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1.2s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
      -webkit-transform: scale(0.3);
    }
}

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

jsfiddle传送门

ps:参考CSS3实现18种Loading效果

未完待续