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

This article mainly introduces the meaning of loading animation in css, which is very detailed and has certain reference value. Friends who are interested must finish reading it!

One: what does loading animation mean?

When many people play games, there will be animation, which means loading or buffering when the network is not connected. The animation appears either because there is a part of the game, or there is something wrong with the player.

Two: several loading animations realized by pure CSS

Or because of the large size of the web page, or because of the use of front-end libraries such as vue, visitors will often appear white screen for a period of time when opening the web page. The usual practice is to show the user a loading animation when the web page is not finished rendering the first screen. After the page is rendered, hide the loading animation. Here we will introduce some very simple CSS animations, please see the illustration.

First of all, the first is the simplest. HTML only needs a tag, and CSS has only a few lines. A brief idea: set the value of equal width and height to an element, set border-radius to 50% to make it a circle, set the background color to transparent, add a few pixel border to the element, and match it with your favorite color. It is important to note that the border of one of the edges is set to transparent so that it looks like a circle with only 3/4, and then animate it. Just make it move. A positioning element can be centered horizontally and vertically by setting transform:translate (- 50% top 50%) and 50% of top and left. The reason why translate (- 50% 0deg 50%) is written in form and to is that if you directly write "transform:translate (- 50% maxim 50%)" on the element and write "transform:rotate (0deg)" in the animation, it will overwrite the transform attribute on the element and cannot be centered.

The second idea is to construct three circles side by side, and make the three circles feel one after another by setting a certain animation delay. Infinite means that the animation is played infinitely, and alternate means that the animation is played from beginning to end and then from end to end.

The third kind is a little more complicated than the first two. Here we use eight circles with absolute positioning, and use the transform attribute to move them one by one from the center to the edge. The angle between the two and the center of the circle is 45 degrees, so the absolute positioning circle is scattered regularly by a multiple of 45 degrees rotated by rotate and then a certain distance to the X-axis translate. (here you need to learn the various attributes of animation. And the influence of the different order of multiple attributes on the result. Then delay the animation of each circle rule. The animation here uses a change in width and height instead of scale, because transform:scale () overrides the previously set transform property so that the circle does not spread out.

The above is all the content of this article "what is the meaning of loading Animation in css". Thank you for reading! Hope to share the content to help you, more related 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.