关于前端:纯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属性的定位布局，最终实现风车动画的制作。以上就是这些内容，感激大家的观看，期待大家的点赞与关注，感激浏览~😛

本文参加了思否技术征文，欢送正在浏览的你也退出。