likes
comments
collection
share

纯CSS实现 | 简单风车动画

作者站长头像
站长
· 阅读数 35

嗨,大家好,我是小棉花,一名前端开发,很开心在这里分享文章,今天来讲下简单风车动画实现以及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;
}

纯CSS实现 | 简单风车动画

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

.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;
}

纯CSS实现 | 简单风车动画

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

<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;
}

纯CSS实现 | 简单风车动画

添加动画效果:

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

最终效果:纯CSS实现 | 简单风车动画

上面动画如果没有设置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属性的定位布局,最终完成风车动画的制作。以上就是这些内容,感谢大家的观看,期待大家的点赞与关注,感谢阅读~😛

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

转载自:https://segmentfault.com/a/1190000042455527
评论
请登录