How do style effects css work when Web pages are loaded? (Multiple style examples)

In the Web front-end development process, as a webmaster may have to consider, if the page is loading state how to use CSS to show the style waiting to be loaded, a good-looking CSS Web page loading animation can reduce the user waiting for the tedious moment of the process. So this article will give you a description of how the CSS loading animation is how to implement the problem?

The pure CSS code implements the page load style:

One, the bar wave style CSS Loading animation code example is as follows:

<div class= "Spinner" > <div class= "Re1" ></div> <div class= "Re2" ></div> <div class= "  Re3 "></div> <div class=" Re4 "></div> <div class=" Re5 "></div></div>.spinner {  margin:100px Auto;  width:50px;  height:60px;  Text-align:center; font-size:10px;}  . Spinner > Div {background-color: #67CF22;  height:100%;  width:6px;     Display:inline-block;  -webkit-animation:stretchdelay 1.2s Infinite ease-in-out; Animation:stretchdelay 1.2s infinite Ease-in-out;}  . Spinner. Re2 {-webkit-animation-delay: -1.1s; Animation-delay: -1.1s;}  . Spinner. Re3 {-webkit-animation-delay: -1.0s; Animation-delay: -1.0s;}  . Spinner. Re4 {-webkit-animation-delay: -0.9s; Animation-delay: -0.9s;}  . Spinner. Re5 {-webkit-animation-delay: -0.8s; Animation-delay: -0.8s;} @-webkit-keyframes stretchdelay {0, 40%, 100% {-webkit-transform:scaley (0.4)} 20% {-webkit-transform:scaley (1.0 )}} @keyframes Stretchdelay {0%, 40%, 100% {Transform:scaley (0.4);  -webkit-transform:scaley (0.4);    } 20% {Transform:scaley (1.0);  -webkit-transform:scaley (1.0); }}

Code effects such as:

Second, the circular loop style CSS loading in the animation code example is as follows:

. container1 > Div,. container2 > Div,. container3 > div {width:6px;  height:6px;   Background-color: #333;  border-radius:100%;  Position:absolute;  -webkit-animation:bouncedelay 1.2s Infinite ease-in-out;  Animation:bouncedelay 1.2s Infinite ease-in-out;  -webkit-animation-fill-mode:both; Animation-fill-mode:both;}  . Spinner. Spinner-container {position:absolute;  width:100%; height:100%;}  . container2 {-webkit-transform:rotatez (45deg); Transform:rotatez (45deg);}  . container3 {-webkit-transform:rotatez (90deg); Transform:rotatez (90deg);} . circle1 {top:0; left:0;}. circle2 {top:0; right:0;}. circle3 {right:0; bottom:0;}.  circle4 {left:0; bottom:0;}. Container2. circle1 {-webkit-animation-delay: -1.1s; Animation-delay: -1.1s;}  . Container3. circle1 {-webkit-animation-delay: -1.0s; Animation-delay: -1.0s;}  . container1. circle2 {-webkit-animation-delay: -0.9s; Animation-delay: -0.9s;} . container2. circle2 {-webkit-animation-delay:-0.8s; Animation-delay: -0.8s;}  . Container3. circle2 {-webkit-animation-delay: -0.7s; Animation-delay: -0.7s;}  . container1. circle3 {-webkit-animation-delay: -0.6s; Animation-delay: -0.6s;}  . container2. circle3 {-webkit-animation-delay: -0.5s; Animation-delay: -0.5s;}  . Container3. circle3 {-webkit-animation-delay: -0.4s; Animation-delay: -0.4s;}  . container1. circle4 {-webkit-animation-delay: -0.3s; Animation-delay: -0.3s;}  . container2. circle4 {-webkit-animation-delay: -0.2s; Animation-delay: -0.2s;}  . Container3. circle4 {-webkit-animation-delay: -0.1s; Animation-delay: -0.1s;} @-webkit-keyframes bouncedelay {0, 80%, 100% {-webkit-transform:scale (0.0)} 40% {-webkit-transform:scale (1.0)}}    @keyframes bouncedelay {0, 80%, 100% {transform:scale (0.0);  -webkit-transform:scale (0.0);    } 40% {Transform:scale (1.0);  -webkit-transform:scale (1.0); }}

Effects such as:

Three, the dot transverse wave style CSS load Animation Implementation code example is as follows:

. Spinner > Div {  width:30px;  height:30px;  Background-color: #67CF22;   border-radius:100%;  Display:inline-block;  -webkit-animation:bouncedelay 1.4s Infinite ease-in-out;  Animation:bouncedelay 1.4s Infinite ease-in-out;  /* Prevent first frame from flickering when animation starts */  -webkit-animation-fill-mode:both;  Animation-fill-mode:both;} . Spinner. Bounce1 {  -webkit-animation-delay: -0.32s;  Animation-delay: -0.32s;} . Spinner. Bounce2 {  -webkit-animation-delay: -0.16s;  Animation-delay: -0.16s;} @-webkit-keyframes Bouncedelay {  0, 80%, 100% {-webkit-transform:scale (0.0)}  40% {-webkit-transform:scale (1.0)}} @keyframes Bouncedelay {  0, 80%, 100% {     transform:scale (0.0);    -webkit-transform:scale (0.0);  } 40% {     Transform:scale (1.0);    -webkit-transform:scale (1.0);  }}

Effects such as: