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 .
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 .
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 ：
Anode css The code is as follows ：
The anode effect diagram is as follows ：
The code of cathode structure is as follows ：
The cathode css The code is as follows ：
The cathode effect diagram is as follows ：
Anode plus cathode effect picture ：
take 2d The plane is transformed into 3d The code is as follows ：
take 2d The plane is transformed into 3d The effect is as follows ：
Create animation keyframes and add animation Property code ：
Anode animation keyframes ：
Add... To the anode animation Property code ：
Cathode animation keyframes ：
Add... To the cathode animation Property code ：
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 .