Last night with CSS3 to achieve a few common loading effect, although very simple, but still share, by the way also when is to do notes ...
1th Effect:
The code is as follows:
<div class= "Loading" > <span></span> <span></span> <span></ span> <span></span> <span></span></div>
. 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; }
2nd effect:
The code is as follows:
<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 Effects:
The code is as follows:
<div class= "Loading" > <span></span> <span></span> <span></ span> <span></span> <span></span></div>
The CSS styles for 第3-5 effects are:
. 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; }
. 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; }
. 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 Effects:
The code is as follows:
<div class= "Loading" > <span></span> <span></span> <span></ span> <span></span> <span></span></div>
The CSS styles for 第6-8 effects are:
. 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 Effects:
The code is as follows:
<div class= "Loadeffect" > <span></span> <span></span> <span>< /SPAN> <span></span> <span></span> <span></span> <span></span> <span></span></div>
CSS styles are:
. 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; }
10 kinds of loading of CSS3