【转】 CSS3实现10种Loading效果

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

PS:如需转载，请注明出处！

第1种效果：

代码如下：

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

.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种效果：

代码如下：

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

.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种效果：

代码如下：

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

第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种效果：

代码如下：

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

第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种效果：

代码如下：

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

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

转自：http://www.cnblogs.com/jr1993/p/4622039.html

原标题：【转】 CSS3实现10种Loading效果

关键词：CSS