Disclaimer: This article is not original

The results are as follows:

The reason why I share it is that on the one hand, I think it looks cool and like the original author said: it looks like a formidable virus, and on the other hand, I think the author’s coding ideas and codes are worth learning.

Step 1: Make the eight diagrams

The first step is to create a Yin Yang diagram using CSS as follows:

This is done with just one div element, created with ::before and ::after. Take a look at the following code, you should understand:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, < p style> < p style = "margin-bottom: 0pt; margin-bottom: 0pt; } .yinyang { position: relative; background-color: #fff; height: 100px; width: 100px; border-radius: 50%; background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000); } .yinyang::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #fff; border: 18px solid #000; border-radius: 50%; width: 14px; height: 14px; } .yinyang::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #000; border: 18px solid #fff; border-radius: 50%; width: 14px; height: 14px; } </style> </head> <body> <div class="yinyang"></div> </body> </html>Copy the code

You can verify this by running the code above

Step 2: Integrate the eight Diagrams

We need an external element div to manage our two generated bagua diagrams. In fact, we have made a big bagua diagram as follows:

The method used here is very much the same as the method used in step 1, so I won’t repeat it here.

Step 3: Add animations

So let’s get the graph moving. Add an animation to the bagua diagram.

@keyframes roll { from { transform: rotate(0deg); } to {transform: rotate(-360deg); // Rotate around}}Copy the code

Of course, we need it to rotate and operate in the.yinyang class:

.yinyang { animation: roll 4s linear infinite; // Complete a uniform animation in 4 seconds and loop}Copy the code

The end

Let’s integrate the code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, < p style> < p style = "margin-bottom: 0pt; margin-bottom: 0pt; } .circle { margin-top: 3rem; box-sizing: border-box; height: 200px; width: 200px; border-radius: 50%; padding-left: 50px; background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000); animation: roll 10s linear infinite; /* animation-direction: reverse; } .yinyang { position: relative; background-color: #fff; height: 100px; width: 100px; border-radius: 50%; background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000); /* Animation: roll 4s linear infinite; } .yinyang::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #fff; border: 18px solid #000; border-radius: 50%; width: 14px; height: 14px; } .yinyang::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #000; border: 18px solid #fff; border-radius: 50%; width: 14px; height: 14px; } @keyframes roll {from {/* from 0 */ transform: rotate(0deg); } to {/* rotate 1 */ transform: rotate(-360deg); } } </style> </head> <body> <div class="circle"> <div class="yinyang"></div> <div class="yinyang"></div> </div> </body> </html>Copy the code

At this point, the implementation of the entire case is complete ✅.

The latter

  • Metamorphose animation using only CSS Rotations 🧘♀️
  • More from Jimmy Blogs