纯CSS实现 | 简单风车动画

嗨，大家好，我是小棉花，一名前端开发，很开心在这里分享文章，今天来讲下简单风车动画实现以及transform-origin动画定位的使用，纯css实现+css3动画效果，定位布局需要熟悉。下面听我细细道来~

代码介绍

风车动画实现其实并不难，首先看到这个动画先不要着急，先看看是由哪些部分组成的，拆分一下，风车由风车叶子4片+风车之家组成，风车叶子又由四个三角形组成，先画出来一个三角形，复制黏贴三个一样的出来，为了区分好看一点，给不同的三角形加不同的背景颜色，然后给每个风车旋转不同角度，一个设置是旋转30度，其他同样道理给每个叠加90度，再通过定位布局让其他一个三角形的点拼合在一起，风车的形状就出来了，然后画支架就是一个长方形很简单，再画一个小圆在风车中间用于遮挡固定风车叶子用。画个三角形: --- 等边三角形通过border的边设置。

<div class="leaves leaves1"></div>

.leaves{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 40px solid #C73736;
}

复制4个三角形出来-给每个添加颜色

<div class="leaves leaves1"></div>
<div class="leaves leaves2"></div>
<div class="leaves leaves3"></div>
<div class="leaves leaves4"></div>

.leaves2{
  border-bottom-color:#59BFED;
}
.leaves3{
  border-bottom-color:#DA7087;
}
.leaves4{
  border-bottom-color:#56D699;
}

给三角形定位旋转，添加之后如下:

.leaves{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 40px solid #C73736;
  position: absolute;
  left: 0;
  top: 0;
}
.leaves1{
  transform: rotate(30deg);
}
.leaves2{
  border-bottom-color:#59BFED;
  transform: rotate(120deg);
  left: 76px;
  top: 9px;
}
.leaves3{
  border-bottom-color:#DA7087;
  transform: rotate(210deg);
  left: 67px;
  top: 84px;
}
.leaves4{
  border-bottom-color:#56D699;
  transform: rotate(300deg);
  left: -8px;
  top: 75px;
}

弄到这里就完成一大半了，再来画个支架，加上定位

<div class="round"></div>
<div class="stick">

.round{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FC899B;
  border: 2px solid #333;
  position: absolute;
  left: 72px;
  top: 52px;
  z-index: 2;
}
.stick{
  width: 4px;
  height: 160px;
  background: #FC899B;
  border: 2px solid;
  position: absolute;
  left: 80px;
  top: 60px;
}

添加动画效果:

.leaves-box{
  transform-origin: 80px 60px;
  animation: wave .8s linear infinite;
}
@keyframes wave{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

最终效果:

上面动画如果没有设置transform-origin: 80px 60px；它会默认是从原点0 0开始旋转的，显然不是我们想要的效果，动画的支点是在80px 60px那个地方，从支架的定位可以看出，所以给当前叶子父级设置transform-origin: 80px 60px；动画就会围绕着旋转了。

最后代码：

 <div class="windmill">
   <div class="leaves-box">
     <div class="leaves leaves1"></div>
     <div class="leaves leaves2"></div>
     <div class="leaves leaves3"></div>
     <div class="leaves leaves4"></div>
   </div>
   <div class="round"></div>
   <div class="stick">
   </div>
</div>

/* 风车 */
.windmill{
  margin: 100px 0;
  position: relative;
}
.leaves-box{
    position: absolute;
}
.leaves{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 40px solid #C73736;
  position: absolute;
  left: 0;
  top: 0;
}
        
.leaves1{
    transform: rotate(30deg);
}
.leaves2{
  border-bottom-color:#59BFED;
  transform: rotate(120deg);
  left: 76px;
  top: 9px;
}
.leaves3{
  border-bottom-color:#DA7087;
  transform: rotate(210deg);
  left: 67px;
  top: 84px;
}
.leaves4{
  border-bottom-color:#56D699;
  transform: rotate(300deg);
  left: -8px;
  top: 75px;
}
.round{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FC899B;
  border: 2px solid #333;
  position: absolute;
  left: 72px;
  top: 52px;
  z-index: 2;
}
.stick{
  width: 4px;
  height: 160px;
  background: #FC899B;
  border: 2px solid;
  position: absolute;
  left: 80px;
  top: 60px;
}

/* 风车旋转动画 */ 
.leaves-box{
  transform-origin: 80px 60px;
  animation: wave .8s linear infinite;
}
@keyframes wave{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

总结

本文介绍了风车动画实现，运用了css3的animation动画属性和transform-origin属性的定位布局，最终完成风车动画的制作。以上就是这些内容，感谢大家的观看，期待大家的点赞与关注，感谢阅读~😛

本文参与了思否技术征文，欢迎正在阅读的你也加入。