The two CSS3 attributes used in this article are: Transform, animation
One, HTML
Copy Code code as follows:
<div class= "ajax-loading" >
<div class= "bar1" ></div>
<div class= "Bar2" ></div>
<div class= "Bar3" ></div>
<div class= "BAR4" ></div>
<div class= "BAR5" ></div>
<div class= "BAR6" ></div>
<div class= "BAR7" ></div>
<div class= "Bar8" ></div>
</div>
Second, CSS
Copy Code code as follows:
. ajax-loading {
position:relative;
width:100px;
height:100px;
margin:25px;
-webkit-transform:scale (0.5);
Transform:scale (0.5);
-webkit-animation:rotatethis 1s infinite step-start;
animation:rotatethis 1s infinite step-start;
}
. ajax-loading Div {
Position:absolute;
top:35px;
left:45px;
width:10px;
height:30px;
background: #000;
}
. ajax-loading div.bar1 {
-webkit-transform:rotate (0deg) translate (0, -40px);
transform:rotate (0deg) translate (0, -40px);
opacity:0.12;
}
. ajax-loading div.bar2 {
-webkit-transform:rotate (45deg) translate (0, -40px);
transform:rotate (45deg) translate (0, -40px);
opacity:0.25;
}
. ajax-loading Div.bar3 {
-webkit-transform:rotate (90deg) translate (0, -40px);
Transform:rotate (90deg) translate (0, -40px);
opacity:0.37;
}
. ajax-loading DIV.BAR4 {
-webkit-transform:rotate (135deg) translate (0, -40px);
transform:rotate (135deg) translate (0, -40px);
opacity:0.5;
}
. ajax-loading DIV.BAR5 {
-webkit-transform:rotate (180deg) translate (0, -40px);
transform:rotate (180deg) translate (0, -40px);
opacity:0.62;
}
. ajax-loading DIV.BAR6 {
-webkit-transform:rotate (225deg) translate (0, -40px);
transform:rotate (225deg) translate (0, -40px);
opacity:0.75;
}
. ajax-loading DIV.BAR7 {
-webkit-transform:rotate (270deg) translate (0, -40px);
transform:rotate (270deg) translate (0, -40px);
opacity:0.87;
}
. ajax-loading Div.bar8 {
-webkit-transform:rotate (315deg) translate (0, -40px);
transform:rotate (315deg) translate (0, -40px);
opacity:1;
}
@-webkit-keyframes Rotatethis {
0% {-webkit-transform:scale (0.5) rotate (0deg);}
12.5% {-webkit-transform:scale (0.5) rotate (45deg);}
25% {-webkit-transform:scale (0.5) rotate (90deg);}
37.5% {-webkit-transform:scale (0.5) rotate (135deg);}
50% {-webkit-transform:scale (0.5) rotate (180deg);}
62.5% {-webkit-transform:scale (0.5) rotate (225deg);}
75% {-webkit-transform:scale (0.5) rotate (270deg);}
87.5% {-webkit-transform:scale (0.5) rotate (315deg);}
100% {-webkit-transform:scale (0.5) rotate (360deg);}
}
@keyframes Rotatethis {
0% {Transform:scale (0.5) rotate (0deg);}
12.5% {transform:scale (0.5) rotate (45deg);}
25% {transform:scale (0.5) rotate (90deg);}
37.5% {transform:scale (0.5) rotate (135deg);}
50% {transform:scale (0.5) rotate (180deg);}
62.5% {transform:scale (0.5) rotate (225deg);}
75% {transform:scale (0.5) rotate (270deg);}
87.5% {transform:scale (0.5) rotate (315deg);}
100% {transform:scale (0.5) rotate (360deg);}
}
Iii. train of Thought
1. Transform control each small square in the Y axis offset, rotate control rotation angle, scale zoom to the original size of half;
2. Opacity in each small square between the difference of about 0.12, to achieve the gradient effect;
3. Set top and left offset, control center in central;
4. Set the rotation animation rotatethis for the whole square, define 8 points of time;
5. Set the animation animation-timing-function for Step-start, achieve the effect is not to let the animation gradient;