Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS3 to achieve page loading loading animation effects, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Example demonstration: create a cylindrical animation loading effect, the stripes from long to short and then long, the specific code is as follows:

HTML section:

CSS section:

.box {

Margin:100pxauto

Width:50px

Height:60px

}

.box > div {

Background-color:#67CF22

Height:100%

Width:6px

Display:inline-block

-webkit-animation:stretchdelay1.2sinfiniteease-in-out

Animation:stretchdelay1.2sinfiniteease-in-out

}

.box.r2 {

-webkit-animation-delay:-1.1s

Animation-delay:-1.1s

}

.box.r3 {

-webkit-animation-delay:-1.0s

Animation-delay:-1.0s

}

.box.r4 {

-webkit-animation-delay:-0.9s

Animation-delay:-0.9s

}

.box.r5 {

-webkit-animation-delay:-0.8s

Animation-delay:-0.8s

}

@-webkit-keyframesstretchdelay {

0%

40%

100% {

-webkit-transform:scaleY (0.4)

}

20% {

-webkit-transform:scaleY (1.0)

}

}

@ keyframesstretchdelay {

0%

40%

100% {

Transform:scaleY (0.4)

-webkit-transform:scaleY (0.4)

}

20% {

Transform:scaleY (1.0)

-webkit-transform:scaleY (1.0)

}

}

The above is "how to use pure CSS3 to achieve page loading loading animation effect" all the content of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.