10 kinds of loading effects achieved by CSS3

This article is mainly for everyone in detail introduced the CSS3 to achieve 10 kinds of loading effect, the effect of simple and novel, with a certain reference value, interested in small partners can refer to

Using CSS3 to achieve a few common loading effect, although very simple, but still share a bit, by the way also when is to do notes ...

1th Effect:

The code is as follows:

<p class= "Loading" >          <span></span>          <span></span>          <span></span >          <span></span>          <span></span>  </p>

. 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:

<p class= "Loading" >          <span></span>  </p>

. 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:

<p class= "Loading" >          <span></span>          <span></span>          <span></span >          <span></span>          <span></span>  </p>

The CSS styles for 第3-5 effects are:

. 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:

<p class= "Loading" >          <span></span>          <span></span>          <span></span >          <span></span>          <span></span>  </p>

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; }

第9-10 Effects:

The code is as follows:

<p class= "Loadeffect" >          <span></span>          <span></span>          <span></ span>          <span></span>          <span></span>          <span></span>          < span></span>          <span></span>  </p>

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;               rightright:14px;           -webkit-animation-delay:0.52s;               }. Loadeffect Span:nth-child (5) {rightright:0;               top:50%;               margin-top:-8px;           -webkit-animation-delay:0.65s;               }. Loadeffect Span:nth-child (6) {rightright:14px;               bottombottom:14px;           -webkit-animation-delay:0.78s;               }. Loadeffect Span:nth-child (7) {bottombottom:0;               left:50%;               Margin-left: -8px;           -webkit-animation-delay:0.91s;               }. Loadeffect Span:nth-child (8) {bottombottom:14px;               left:14px;           -webkit-animation-delay:1.04s; } 

PS:CSS style code In fact a lot of repetition, mainly is the animation is not the same, but in order to facilitate the use of directly in the future, the first do not tidy up.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!