CSS implements the second-ring rotation of an animation

CSS implements the second-ring rotation of an animation
Last time, I briefly introduced how to use code to implement the animation for loading chrysanthemum rotation, and click the animation. This time, we continued to use our animation series to implement another loading animation and rotating the ring. Unlike the previous one, chrysanthemum rotation is implemented by changing the transparency of elements. This time, considering the element overlay and the element itself has a background color, changing the transparency will affect the effect, therefore, the effect of this ring can be achieved by directly changing the background color of the element and adding the appropriate delay. The fundamental principle of animation implementation is to separate each element to be changed and the change process. All the animations are debugged in chrome, without considering compatibility and performance issues. They simply describe how to achieve the effect. If there is a better method, It will be updated in time. 2. Code Implementation ideas the key to implementing this animation is how to separate each changed element and implement this ring effect. Image Description: 2.1 defines the element container first. The width of the two elements is 50%, which is absolutely located and 50% away from the left side. This allows the content to rotate around the element center. 2.2 Each sub-element defines the left border. The border color is the same as the background color of the outer container. In this way, it is hollow out. Note that the sub-element needs to move the border half width to the left, make sure that the center of the container is the center of the border, otherwise there will be errors when the sub-elements rotate. 2.3 define the degree of rotation of each sub-element, create a sector shape, and finally form the right circle. 2.4 copy all the child elements in the Right circle, rotate them 180 degrees, and spell out the shape of the Left circle. At this time, the child elements in the left circle will overwrite the shape on the right, so use clip for cropping, only show the left circle. At this time, all the elements that constitute a complete circle are ready, as shown in 2.5. 2.6 At this time, the element shape is not a standard circle. The element covers the circle with the same color as the background. Then, the outer container uses border-radius to form a positive circle. Then, the entire element is displayed as a circular shape. 2.7 Define the animation Key Frame and use it on each child element. This animation changes the background color of each sub-element, delays the animation start time clockwise, and finally forms the display mode in the gif image. 3. The main technology used is actually not complicated, and it does not use any esoteric technology. It mainly uses the transform and animation attributes. The usage is not explained in detail here. In addition, the clip attribute is used to control the display range of elements and crop absolute positioning elements. This attribute defines a cropped rectangle, which is visible to elements within the rectangle range. Usage: clip: rect (0px, 16px, 32px, 1px); four valid values: rect (top, right, bottom, left) 4. Source Code copy code 1 <! DOCTYPE html> 2