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

This article mainly shows you "CSS3 how to achieve loading animation effects", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS3 how to achieve loading animation effects" this article.

The first step is to draw static little chrysanthemums.

.sk-fading-circle {

Width: 40px

Height: 40px

Position: relative

}

.sk-fading-circle. Sk-circle {

Width: 100%

Height: 100%

Position: absolute

Left: 0

Top: 0

}

.sk-fading-circle. Sk-circle:before {

Content:''

Display: block

Margin: 0 auto

Width: 15%

Height: 15%

Background-color: # 333

Border-radius: 100%

}

... / / omit the middle 10 div in order to reduce the space

As in the code above, static chrysanthemum is actually an outer div with 12 small div nested in it. The little div is drawn into a circle by border-radius and positioned in the center of the top grid by margin: 0 auto;. Since the 12 small div are all located by absolute, they all overlap.

The second step is to spread out the 12 overlapping circles.

.sk-fading-circle. Sk-circle2 {transform: rotate (30deg);}

.sk-fading-circle. Sk-circle3 {transform: rotate (60deg);}

... / / Saving space, each circle rotates incrementally every 30 degrees

.sk-fading-circle. Sk-circle12 {transform: rotate (330deg);}

... / / omit the middle 10 div in order to reduce the space

Code as above, use transform's rotate to rotate each dot to form a complete chrysanthemum shape. If you are not familiar with transform, take a look at the following picture, the second dot rotation 30 degrees schematic diagram, the rest of the dot rotation brain compensation:

The third step is to control the opacity attribute through animation to make each point fade in and out.

@-webkit-keyframes sk-circleFadeDelay {

0%, 39%, 100% {opacity: 0;}

40% {opacity: 1;}

}

@ keyframes sk-circleFadeDelay {

0%, 39%, 100% {opacity: 0;}

40% {opacity: 1;}

}

.sk-fading-circle. Sk-circle:before {

……

Animation: sk-circleFadeDelay 1.2s infinite ease-in-out both

}

In this way, each point flashes synchronously like a signal light.

The last step is to set an animation-delay delay for each point to stagger the flickering time to create a common chrysanthemum turning effect.

.sk-fading-circle. Sk-circle2:before {animation-delay:-1.1s;}

.sk-fading-circle. Sk-circle3:before {animation-delay:-1s;}

.sk-fading-circle. Sk-circle4:before {animation-delay:-0.9s;}

... / / the intermediate code is omitted in order to reduce the space.

.sk-fading-circle. Sk-circle12:before {animation-delay:-0.1s;}

Because there are 12 dots, the flicker interval of each dot is 0.1s, so the first dot has no animation-delay delay and flashes immediately. The second dot starts flashing from-1.1s (if you don't understand the negative number, refer to the article animation, which means to start at that point in time, and the previous animation effect is not displayed). After that, each dot is delayed at an increasing speed of 0.1s.

The above is all the content of this article "how to achieve loading Animation effects in CSS3". 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.