Pure CSS3 effect rotation windmill

Today, we still do a relatively simple CSS3 animations - colorful windmill wind rotation. This dynamic efficiency and, like the previous tutorial, using only CSS3 complete. We use some common CSS3 animation techniques, coupled with traditional production methods CSS triangles, completes the effect of rotating windmill wind:

Front-end code

HTML code:

        <div id="effect-windmill">
            <div class="blade-container">
                <div class="blade-item"></div>
                <div class="blade-item"></div>
                <div class="blade-item"></div>
                <div class="blade-item"></div>
            </div>
            <div class="pole"></div>
        </div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

CSS3 Code:

#effect-windmill {
  position: relative;
  margin: auto;
  margin-top: 80px;
  width: 300px;
  height: 450px;
}

#effect-windmill > .blade-container {
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  width: 300px;
  height: 300px;
  overflow: hidden;
  z-index: 20;
  animation: wind 10s linear 3s infinite;
  -webkit-animation: wind 10s linear 3s infinite;
}

#effect-windmill > .blade-container > .blade-item {
  width: 0;
  height: 0;
}

#effect-windmill > .blade-container > .blade-item:nth-child(1) {
  border-right: 150px solid transparent;
  border-bottom: 150px solid #e74c3c;
}

#effect-windmill > .blade-container > .blade-item:nth-child(2) {
  border-left: 150px solid transparent;
  border-bottom: 150px solid #e67e22;
}

#effect-windmill > .blade-container > .blade-item:nth-child(3) {
  border-right: 150px solid transparent;
  border-top: 150px solid #f1c40f;
}

#effect-windmill > .blade-container > .blade-item:nth-child(4) {
  border-left: 150px solid transparent;
  border-top: 150px solid #2ecc71;
}

#effect-windmill > .pole {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  height: 300px;
  background-color: #3498db;
  z-index: 10;
}

@keyframes wind {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(-3600deg);
    -webkit-transform: rotate(-3600deg);
    -moz-transform: rotate(-3600deg);
    -ms-transform: rotate(-3600deg);
    -o-transform: rotate(-3600deg);
  }
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

Knowledge extraction

1. Windmill rotation effect using CSS3 animate properties, and then transform property changes with the wind turbine blade keyframe container rotation to achieve the effect just note here the rotation of the wind turbine blade peripheral vessel.
2. Windmill blades using flex layout CSS3, we set up the layout of flex wrap, so that only a set of styles can make four leaves reaches a predetermined position, save a lot of code.
3. When we add style to each blade individually, use the nth-child pseudo-class selectors, the biggest advantage of this choice is not required for each blade individually customized class, you only need to write according to their own style number.
4. Css conventional triangle is provided a method of making large the width of the border attribute to simulate a triangle. The triangle is also doing out here, interested can learn more about the border triangle of production methods.