关于前端:纯CSS实现-简单风车动画

37次阅读

共计 3110 个字符，预计需要花费 8 分钟才能阅读完成。

嗨，大家好，我是小棉花，一名前端开发，很开心在这里分享文章，明天来讲下简略风车动画实现以及 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 属性的定位布局，最终实现风车动画的制作。以上就是这些内容，感激大家的观看，期待大家的点赞与关注，感激浏览~😛

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

正文完