第1種效果：

代碼如下：

html

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種效果

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

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種效果：

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種效果：

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教程》

總結

以上是生活随笔為你收集整理的php loading效果,利用CSS3打造十种Loading效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。