html顺序进场动画,十六种炫酷纯css加载动画（一）

一个好的开篇，会给你这个项目增加不少分值。

有没有遇到过打开页面加载一段时间，页面内容才加载出来。在等待加载的过程中页面却是空白页，给用户的体验特别不好，会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，对，就是纯css3的炫酷加载动画，请看效果！

码字不易，且行且珍惜。

加载1

css源码

.title{

width: 100%;

text-align: center;

margin:60px 0;

font-size: 18px;

color: #999;

}

.loadingOne{

width: 80px;

height: 40px;

margin: 0 auto;

}

.loadingOne span{

display: inline-block;

width: 8px;

height: 100%;

border-radius: 4px;

background: lightgreen;

-webkit-animation: load 1s ease infinite;

animation: load 1s ease infinite;

}

@-webkit-keyframes load{

0%,100%{

height: 40px;

background: lightgreen;

}

50%{

height: 70px;

margin: -15px 0;

background: lightblue;

}

}

.loadingOne span:nth-child(2){

-webkit-animation-delay:0.2s;

animation-delay:0.2s;

}

.loadingOne span:nth-child(3){

-webkit-animation-delay:0.4s;

animation-delay:0.4s;

}

.loadingOne span:nth-child(4){

-webkit-animation-delay:0.6s;

animation-delay:0.6s;

}

.loadingOne span:nth-child(5){

-webkit-animation-delay:0.8s;

animation-delay:0.8s;

}

html源码

加载2

css源码

.loadingTwo{

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;

animation: changeBgColor 1.04s ease-in infinite alternate;

}

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

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: