CSS Artifact: Use Pure CSS to Realize Cute and Exquisite Fan-shaped Animation

CSS is an indispensable and important tool in front-end development, which can make web pages beautiful and vivid. Today we will introduce how to achieve an interesting fan animation using pure CSS. This article will explain the implementation process of this sample code from the following aspects: design ideas, HTML structure, CSS style.

Design ideas

What we need to achieve is a lovely and delicate fan-shaped animation, and the final effect is as shown in the figure below:

We can see that this fan animation is composed of multiple fans, each fan has a different color and size, and they are constantly rotating, forming an interesting animation effect. Our design ideas are as follows:

HTML structure: Use the div element to create a fan-shaped graphic, each fan is implemented using a separate div element, and finally combined into a complete fan-shaped animation.
CSS style: Set different color, size, rotation angle and other style attributes for each fan-shaped element, and use @keyframes to achieve rotation animation effects.

HTML structure

Let's take a look at the HTML structure first, as follows:

<div class="fan-container">
  <div class="fan fan-1"></div>
  <div class="fan fan-2"></div>
  <div class="fan fan-3"></div>
  <div class="fan fan-4"></div>
  <div class="fan fan-5"></div>
  <div class="fan fan-6"></div>
  <div class="fan fan-7"></div>
  <div class="fan fan-8"></div>
</div>

First, we create a div element with the class name "fan-container" as the container for the entire fan animation. Then, we created 8 div elements with the class name "fan", each fan is implemented using a separate div element. For easy styling, we set a different class name for each fan element (such as "fan-1", "fan-2", etc.).

css style

Next, we need to style each fan element. Let's take a look at the basic style of each fan element:

.fan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100% 0 0 0;
  transform-origin: bottom right;
}

We set each fan element to absolute positioning and place them right in the center of the parent element. We also use the transform property to rotate the fan element to the correct angle. Finally, we set some basic styling properties for the fan element, including border radius, deformation origin, etc.

Next, we need to set a different color and size for each fan element. We can do this by adding class names to each fan element and then setting different style properties in CSS. For example, here is the style for the "fan-1" element:

.fan-1 {
  width: 120px;
  height: 120px;
  background-color: #FFC740;
}

We can see that the "fan-1" element has a width of 120px, a height of 120px, and a background color of #FFC740. We can also set the style properties of other fan elements as follows:

.fan-2 {
  width: 135px;
  height: 135px;
  background-color: #FF6381;
}

.fan-3 {
  width: 150px;
  height: 150px;
  background-color: #87CEEB;
}

.fan-4 {
  width: 165px;
  height: 165px;
  background-color: #3CB371;
}

.fan-5 {
  width: 180px;
  height: 180px;
  background-color: #BA55D3;
}

.fan-6 {
  width: 195px;
  height: 195px;
  background-color: #FF7F50;
}

.fan-7 {
  width: 210px;
  height: 210px;
  background-color: #00CED1;
}

.fan-8 {
  width: 225px;
  height: 225px;
  background-color: #6A5ACD;
}

Finally, we need to animate the rotation of each fan element. We can do this by using the @keyframes keyword. For example, here is the style for the "fan-1" element:

.fan-1 {
  animation: spin 8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

We can see that the "fan-1" element will make a full rotation in 8 seconds, which continues an infinite number of times. We can also animate the rotation of other fan elements as follows:

.fan-2 {
  animation: spin 7s linear infinite reverse;
}

.fan-3 {
  animation: spin 6s ease-in-out infinite;
}

.fan-4 {
  animation: spin 5s linear infinite;
}

.fan-5 {
  animation: spin 4s ease-in-out infinite reverse;
}

.fan-6 {
  animation: spin 3s linear infinite;
}

.fan-7 {
  animation: spin 2s ease-in-out infinite;
}

.fan-8 {
  animation: spin 1s linear infinite reverse;
}

We can see that each fan element has its own rotation animation, some of which rotate in opposite directions, some of which use different easing functions, etc.

full code

Finally, we put the complete code together, which looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Fan Animation</title>
    <style>
      .fan-container {
        width: 300px;
        height: 300px;
        position: relative;
      }
      
      .fan {
        position: absolute;
        top: 50%;
        left: 50%;
         transform: translate(-50%, -50%);
        border-radius: 100% 0 0 0;
        transform-origin: bottom right;
      }
      
      .fan-1 {
        width: 120px;
        height: 120px;
        background-color: #FFC740;
        animation: spin 8s linear infinite;
      }
      
      .fan-2 {
        width: 135px;
        height: 135px;
        background-color: #FF6381;
        animation: spin 7s linear infinite reverse;
      }
      
      .fan-3 {
        width: 150px;
        height: 150px;
        background-color: #87CEEB;
        animation: spin 6s ease-in-out infinite;
      }
      
      .fan-4 {
        width: 165px;
        height: 165px;
        background-color: #3CB371;
        animation: spin 5s linear infinite;
      }
      
      .fan-5 {
        width: 180px;
        height: 180px;
        background-color: #BA55D3;
        animation: spin 4s ease-in-out infinite reverse;
      }
      
      .fan-6 {
        width: 195px;
        height: 195px;
        background-color: #FF7F50;
        animation: spin 3s linear infinite;
      }
      
      .fan-7 {
        width: 210px;
        height: 210px;
        background-color: #00CED1;
        animation: spin 2s ease-in-out infinite;
      }
      
      .fan-8 {
        width: 225px;
        height: 225px;
        background-color: #6A5ACD;
        animation: spin 1s linear infinite reverse;
      }
      
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="fan-container">
      <div class="fan fan-1"></div>
      <div class="fan fan-2"></div>
      <div class="fan fan-3"></div>
      <div class="fan fan-4"></div>
      <div class="fan fan-5"></div>
      <div class="fan fan-6"></div>
      <div class="fan fan-7"></div>
      <div class="fan fan-8"></div>
    </div>
  </body>
</html>

in conclusion

Through this example, we can see that CSS can be used to achieve various interesting animation effects very flexibly. This fan-shaped animation example is just a small example, we can use more complex CSS techniques, such as CSS3 animation, transition, deformation, etc., to achieve more diverse and refined animation effects. I hope this article can be helpful to everyone's study and practice