CSS3实现10种Loading效果

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

第1种效果：

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

第2种效果：

代码如下：

.loading{
     width: 150px;
     height: 4px;
     border-radius: 2px;
     margin: 0 auto;
     margin-top:100px;
     position: relative;
     background: lightgreen;
     -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 }
 .loading span{
     display: inline-block;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: lightgreen;
     position: absolute;
     margin-top: -7px;
     margin-left:-8px;
     -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 }
 @-webkit-keyframes changeBgColor{
     0%{
  background: lightgreen;
     }
     100%{
  background: lightblue;
     }
 }
 @-webkit-keyframes changePosition{
     0%{
  background: lightgreen;
     }
     100%{
  margin-left: 142px;
  background: lightblue;
     }
 }

第3-5种效果：

代码如下：

第3-5种效果的css样式分别为：

.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     border-radius: 50%;
     background: lightgreen;
     -webkit-animation: load 1.04s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
  opacity: 1;
     }
     100%{
  opacity: 0;
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     border-radius: 50%;
     background: lightgreen;
     -webkit-animation: load 1.04s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
  opacity: 1;
  -webkit-transform: scale(1.3);
     }
     100%{
  opacity: 0.2;
  -webkit-transform: scale(.3);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     position: relative;
     margin-top:100px;
 }
 .loading span{
     position: absolute;
     width: 15px;
     height: 100%;
     border-radius: 50%;
     background: lightgreen;
     -webkit-animation: load 1.04s ease-in infinite alternate;
 }
 @-webkit-keyframes load{
     0%{
  opacity: 1;
  -webkit-transform: translate(0px);
     }
     100%{
  opacity: 0.2;
  -webkit-transform: translate(150px);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

第6-8种效果：

代码如下：

第6-8种效果的css样式分别为：

.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
     text-align: center;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     background: lightgreen;
     -webkit-animation: load 1.04s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
  opacity: 1;
     }
     100%{
  opacity: 0;
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     background: lightgreen;
     -webkit-transform-origin: right bottom;
     -webkit-animation: load 1s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
  opacity: 1;
     }
     100%{
  opacity: 0;
  -webkit-transform: rotate(90deg);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     background: lightgreen;
     -webkit-transform-origin: right bottom;
     -webkit-animation: load 1s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
  opacity: 1;
  -webkit-transform: scale(1);
     }
     100%{
  opacity: 0;
  -webkit-transform: rotate(90deg) scale(.3);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

第9-10种效果：

代码如下：

CSS样式分别为：

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

.loadEffect{
     width: 100px;
     height: 100px;
     position: relative;
     margin: 0 auto;
     margin-top:100px;
 }
 .loadEffect span{
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: lightgreen;
     position: absolute;
     -webkit-animation: load 1.04s ease infinite;
 }
 @-webkit-keyframes load{
     0%{
  -webkit-transform: scale(1.2);
  opacity: 1;
     }
     100%{
  -webkit-transform: scale(.3);
  opacity: 0.5;
     }
 }
 .loadEffect span:nth-child(1){
     left: 0;
     top: 50%;
     margin-top:-10px;
     -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: -10px;
     -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:-10px;
     -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: -10px;
     -webkit-animation-delay:0.91s;
 }
 .loadEffect span:nth-child(8){
     bottom: 14px;
     left: 14px;
     -webkit-animation-delay:1.04s;
 }

PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

作者：郭锦荣
文章源自：http://www.cnblogs.com/jr1993/p/4622039.html