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

How to use pure CSS to realize the animation effect of rotating React icon, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

A few days ago, the editor saw a sword loading effect in codepen. He was surprised and was impressed by CSS again. Originally wanted to work with you to achieve sword loading, after the search, the editor found that colleagues have been achieved.

Racking my brains, I came up with a very interesting pattern, which is simply a sword-like plus version.

React icon, amazing, this is not Jian Qi plus? React, get the bag moving *!

React icon drawing

The react icon, which consists of three ellipses of the same size and a central circle, should be familiar to everyone. Ellipses and circles are implemented using border-radius.

First prepare the html structure of three ellipses and center circles

Three ellipses are the same. Write a general ellipse style and get three overlapping ellipses.

.react > [class^ = "electron"] {border: # 5ed3f3 solid 2px; border-radius: 100%; width: 100%; / * CSS variable-electron-orbit- size is 72px * / height: var (--electron-orbit-size);}

Set the inclination of the second and third ellipses to 60deg and-60deg, respectively.

.electron-alpha {transform: rotate (60deg);} .electron-omega {transform: rotate (- 60deg);}

Draw the center circle using react: before pseudo elements, and position the center circle to the center with absolute positioning. The react icon is drawn.

.react: before {position: absolute; top: 50%; left: 50%; width: var (--nucleus-size); height: var (--nucleus-size); margin-top: calc (var (--nucleus-size) /-2); margin-left: calc (var (--nucleus-size) /-2); background: var (--electron-color-hex);} .react > [class^ = "electron"] {position: absolute Top: 50%; margin-top: calc (var (--electron-orbit-size) /-2);}

Animation Design of react Icon

With fifty days and forty-nine days, there is still a glimmer of life, and the absence may form a special beauty.

So we started to try to miss part of the ellipse to see if it would have a cool dynamic effect.

Assuming that the initial state is border-left missing, and then missing in the order of left, lower, upper and right, let's take a look at the animation effect.

Animate electron-orbit to switch missing edges sequentially

@ keyframes electron-orbit {0% {border-top: rgba (94,211,243,1) solid 2px; border-right: rgba (94,211,243,1) solid 2px; border-bottom: rgba (94,211,243,1) solid 2px; border-left: rgba (94,211,243,0) solid 2px;} 25% {border-top: rgba (94,211,243,1) solid 2px; border-right: rgba (94,211,243,1) solid 2px Border-bottom: rgba (94,211,243,0) solid 2px; border-left: rgba (94,211,243,1) solid 2px;} 50% {border-top: rgba (94,211,243,1) solid 1px; border-right: rgba (94,211,243,0) solid 2px; border-bottom: rgba (94,211,243,1) solid 4px; border-left: rgba (94,211,243,1) solid 2px } 75% {border-top: rgba (94,211,243,0) solid 2px; border-right: rgba (94,211,243,1) solid 2px; border-bottom: rgba (94,211,243,1) solid 2px; border-left: rgba (94,211,243,1) solid 2px;} 100% {border-top: rgba (94,211,243,1) solid 2px; border-right: rgba (94,211,243,1) solid 2px Border-bottom: rgba (94,211,243,1) solid 2px; border-left: rgba (94,211,243,0) solid 2px;}}

The overall effect of the animation is OK, but because the missing part is from 0 to > 1, the transparency changes too much, resulting in the overall incoherence of the animation.

Reduce the transparency of the display edges to 0.5 0.35 0.2 0 respectively

After reducing the transparency, the animation coherence is improved a lot, but the lines feel bad, and then continue to modify the thickness of the lines.

Modify the thickness of the line, and the thickness gradient is 4px 2px 1px 0px.

The three ellipses use the same animation and start at the same time, so the animation rhythm remains the same and looks a bit stiff, so we set a unique animation rhythm for each ellipse.

Set different animation delay time for each ellipse, which is 1.2s 1s 0.8s respectively

Add ball animation

Only the line animation is still a bit monotonous, continue to optimize, add a ball to the missing part, the ball moves with the missing part, and the ball is accompanied by zooming in and out.

@ keyframes electron {0% {left: calc (var (--electron-size) /-1); transform: scale (1);} 12.5% {top: 100%; transform: scale (1.5);} 25% {left: 100%; transform: scale (1);} 37.5% {top: 0%; transform: scale (0.25) } 50% {left: calc (var (--electron-size) /-1); transform: scale (1);} 62.5% {top: 100%; transform: scale (1.5);} 75% {left: 100%; transform: scale (1);} 87.5% {top: 0%; transform: scale (0.25) } 100% {left: calc (var (--electron-size) /-1); transform: scale (1);}}

Well, does it look like there's something going on? don't worry, there's one last step. Let's get the icon moving.

Move the icon.

Add rotation and zoom in animation to the icon as a whole to complete the final react loading effect.

@ keyframes react {0% {transform: rotate (0deg) scale (1);} 12.5% {transform: rotate (- 45deg) scale (0.9);} 25% {transform: rotate (- 90deg) scale (1);} 37.5% {transform: rotate (- 135deg) scale (0.9);} 50% {transform: rotate (- 180deg) scale (1) } 62.5% {transform: rotate (- 225deg) scale (0.9);} 75% {transform: rotate (- 270deg) scale (1);} 87.5% {transform: rotate (- 315deg) scale (0.9);} 100% {transform: rotate (- 360deg) scale (1) }} the answer to the question about how to use pure CSS to realize the animation effect of rotating React icon is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.