CSS: One of the loading animations-chrysanthemum Rotation

CSS: One of the loading animations-chrysanthemum Rotation
Recently I plan to organize several animation styles. The most common one is the loading animation we use. The processing of the animation loading effect will give the page an eye-catching effect, so that users are willing to wait. The most common practice on a page is to make an animation into a gif format and reference it as a background image or an img tag. This method is the simplest and there will be no compatibility issues. However, I sometimes love to see the effects of some animations, whether simple or complex, and want to use code to implement it, in a different way of thinking, even if it is very unlikely to be used in the project, it is always possible to write more by yourself. CSS3 has many new powerful functions. Although there may be compatibility issues, it cannot block the use of these new features. For example, some simple animations were previously implemented by drawing tools and can now be implemented simply with CSS. The following example shows how to use CSS and html to implement the animation of chrysanthemum rotation. 2. The code implementation idea breaks down this animation. There are five steps. First, we use a diagram to illustrate: 2.1 first defines the element container and defines the position of each line. 2.2 because the transparency of each line is inconsistent during rotation, a single line should be divided into two blocks. 2.3 use the rotate method of CSS to rotate the line. The degree of rotation depends on the number of lines, and the line is formed into a positive circle. 2.4 The Circle is covered with a positive circle of the same color as the background. The center of the positive circle is consistent with the center of the circle formed by the line, so that the whole shape will feel hollow out. 2.5 The most important part of this step is to form the core of the animation. In fact, the whole implementation process of the animation is very simple, that is, to change the transparency of each line. This can be achieved through the animation delay of animation, that is, the animation delay time of each line is determined by its position. 3. The main technologies used mainly use the rotate rotation method and the animation method of css3. 3.1 rotate is an attribute in the transform method. In addition to rotate, it also includes translate (translation), scale (scaling), and skew (stretching ). The specifics are not explained in detail. 3.2 To use the animation method, use the @ keyword to define the key frame of the animation and reference it in the corresponding style name. In this case, we first define the animation load @-webkit-keyframes load {0% {opacity: 0;} 100% {opacity: 1 ;}} and then reference it in the animation node style. m-load2. line div: nth-child (1): before {-webkit-animation: load 1.2 s linear 0 s infinite ;} the values load 1.2 s linear 0 s infinite correspond to the animation name, animation duration, animation display mode, and animation delay time respectively, whether the animation is played cyclically or not, and whether the animation is played reversely. 4. Copy the source code of the Case 1 <! DOCTYPE html> 2