css3 loading

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*loadint1 start*/
.loading1 {
height:40px;
width:80px;
margin:0 auto;
margin-top:100px;
}
.loading1 span {
display:inline-block;
width:8px;
height:100%;
border-radius:4px;
background:lightgreen;
-webkit-animation:load 1s ease infinite;
animation:load 1s ease infinite;
}

.loading1 span:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}

.loading1 span:nth-child(3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.loading1 span:nth-child(4) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.loading1 span:nth-child(5) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
@keyframes load {
0%,100% {
height: 40px;
background: lightgreen;
}

50% {
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
@-webkit-keyframes load{
0%,100%{
height:40px;
background:lightgreen;
}
50% {
height:70px;
margin:-15px 0;
background:lightblue;
}
}
/*loadint1 end*/

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

100% {
background: lightgreen;
}
}
@keyframes changePosition
{
0%{
background:lightblue;
}
100%{
margin-left:142px;
background:lightgreen;
}
}
@-webkit-keyframes changePosition {
0% {
background: lightblue;
}

100% {
margin-left: 142px;
background: lightgreen;
}
}
/*loading2 end*/
/*loading3 start*/
.loading3{
width:150px;
height:15px;
margin:0 auto;
position:relative;
margin-top:100px;
}
.loading3 span {
/*display: inline-block;*/
position:absolute;
width: 15px;
height: 100%;
margin-left: 5px;
border-radius: 50%;
background: lightgreen;
animation: load3 1s ease infinite;
-webkit-animation: load3 1s ease-in infinite alternate;
}
.loading3 span:last-child{
margin-right:0px;
}
@keyframes load3
{
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@-webkit-keyframes load3 {
0% {
opacity: 1;
/*-webkit-transform:scale(1.3);*/
-webkit-transform:translate(0px);
}

100% {
opacity: 0.2;
/*-webkit-transform: scale(.3);*/
-webkit-transform: translate(150px);
}
}
.loading3 span:nth-child(1){
animation-delay:0.13s;
-webkit-animation-delay:0.13s;

}
.loading3 span:nth-child(2) {
animation-delay: 0.26s;
-webkit-animation-delay: 0.26s;
}
.loading3 span:nth-child(3) {
animation-delay: 0.39s;
-webkit-animation-delay: 0.39s;
}
.loading3 span:nth-child(4) {
animation-delay: 0.52s;
-webkit-animation-delay: 0.52s;
}
.loading3 span:nth-child(5) {
animation-delay: 0.65s;
-webkit-animation-delay: 0.65s;
}
/*loading3 end*/

/*loading4 start*/
.loading4{
width:150px;
height:15px;
margin:0 auto;
margin-top:100px;
}
.loading4 span{
width:15px;
height:100%;
display:inline-block;
background:lightgreen;
margin-left:5px;
-webkit-animation:load4 1s ease infinite;
}

@-webkit-keyframes load4{
0%{
opacity:1;
}
100%{
opacity:0;
-webkit-transform:rotate(180deg) scale(0.5);
}
}

.loading4 span:nth-child(1){
-webkit-animation-delay:0.13s;
}

.loading4 span:nth-child(2) {
-webkit-animation-delay: 0.26s;
}
.loading4 span:nth-child(3) {
-webkit-animation-delay: 0.39s;
}

.loading4 span:nth-child(4) {
-webkit-animation-delay: 0.52s;
}

.loading4 span:nth-child(5) {
-webkit-animation-delay: 0.65s;
}
/*loading4 end*/

/*loading5 begin*/
.loading5{
height:100px;
width:100px;
position:relative;
margin:0 auto;
margin-top:100px;
}

.loading5 span{
height:16px;
width:16px;
display:inline-block;
border-radius:50%;
background:lightblue;
position:absolute;
-webkit-animation:load5 1.04s ease infinite;
}

@-webkit-keyframes load5{
0%{
opacity:1;
-webkit-transform:scale(1.2);
}
100%
{
opacity:0.2;
-webkit-transform:scale(0.3);
}
}

.loading5 span:nth-child(1){
left:0px;
top:50%;
margin-top:-8px;

-webkit-animation-delay:0.13s;
}

.loading5 span:nth-child(2)
{
left:16px;
top:25%;
margin-top:-8px;
-webkit-animation-delay:0.26s;
}

.loading5 span:nth-child(3){
left:50%;
top:0px;
margin-left:-8px;
-webkit-animation-delay:0.39s;
}

.loading5 span:nth-child(4){
right:16px;
top:25%;
margin-top:-8px;
-webkit-animation-delay:0.52s;
}

.loading5 span:nth-child(5){
right:0px;
top:50%;
margin-top:-8px;
-webkit-animation-delay:0.65s;
}
.loading5 span:nth-child(6)
{
right:16px;
bottom:25%;
margin-bottom:-8px;
-webkit-animation-delay:0.78s;
}
.loading5 span:nth-child(7){
left:50%;
bottom:0px;
margin-left:-8px;
-webkit-animation-delay:0.91s;
}
.loading5 span:nth-child(8){
left:16px;
bottom:25%;
margin-bottom:-8px;
-webkit-animation-delay:1.04s;
}

/*loading5 end*/

</style>
</head>
<body>
<div class="loading1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<br />
<div class="loading2">
<span></span>
</div>
<div class="loading3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

posted on 2015-07-06 18:49 fenix 阅读(128) 评论(0) 收藏举报