Today, Xiao Qian will share with you an issue of pure CSS To achieve the dynamic effect of Taiji tutorial , The final effect is shown in the figure below , Totally useless JavaScript Oh , keep looking down to the bottom .

1

hold 2d The static Taiji diagram has been changed to 3d, The cathode and anode are divided into two planes to achieve the effect of rotation , This is easy to realize , The point is to make it transparent , The plane Tai Chi diagram shows that the two poles use additional block elements to block the color of the bottom , But if the two poles in the picture above use occlusion to achieve the effect, it will not be transparent , If you make the blocked block transparent, it will show the original appearance of the bottom , So this idea is not right . Then you can only make the bottom itself transparent , But how to achieve both transparency and this kind of appearance ? The gradient , And in order to look like a circle, I chose a radial gradient .

v2-45f62375bd4d5f3cfc839f4bc22a57ee_720w

effect :

3

Clear thinking , Start the operation

One pole is divided into four blocks , Round head , belly , tail , And separate circles . The first circle , Transparent in the middle .

4

The second piece is connected to it , In order not to block the circle in the middle of the first block, we need to change it , Fillet the upper right corner and change the attribute to semicircle , Plus radial gradients , Change the origin to left center, and then adjust the percentage of transparency .

The code of anode structure is as follows :

5

Anode css The code is as follows :

6

The anode effect diagram is as follows :

7

The code of cathode structure is as follows :

9

The cathode css The code is as follows :

10

The cathode effect diagram is as follows :

11

Anode plus cathode effect picture :

12

take 2d The plane is transformed into 3d The code is as follows :

13

take 2d The plane is transformed into 3d The effect is as follows :

14

Create animation keyframes and add animation Property code :

Anode animation keyframes :

15

Add... To the anode animation Property code :

16

Cathode animation keyframes :

17

Add... To the cathode animation Property code :

18

After the above operation is completed, you can see the dynamic effect at the beginning of the article , Let's have a try , It's not enough just to understand . Many students think that I will , Then your hand said I didn't know ~~

This article is from Qianfeng education , Reprint please indicate the source .