利用CSS3打造十种Loading效果

代码如下：

html

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

css

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

.0

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

3

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

4

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

5

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

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

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

推荐CSS教程：《CSS教程》

以上就是利用CSS3打造十种Loading效果的详细内容，更多内容请关注技术你好其它相关文章！