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 .


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 .


effect :


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 .