持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

大风车应该是很多人的儿童乐趣吧，不知道每个地方的叫法是不是不一样，我们这边是用纸进行折叠的，今天做的效果是把杆去掉了，就留个风车叶片。

风车叶片

一个风车三叶片，一个一个不停转。

结构

如果只是三个叶片的话，刚好一个dom就行了，如果你想做类似多叶片的，就不止一个dom了，如下：

 <div class="container"></div>

样式

首先，我们需要给body一个背景色，如下：

body {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #000;
}

然后，我们给风车叶片🍃容器一个基础的样式，同时它也是第一片叶片的样式，如下：

.container {
   --size: 3rem;
   width: calc(var(--size) * 2.5);
   height: var(--size);
   border-radius: 50%;
   background: rgb(61, 221, 61);
   position: relative;
   transform-origin: right center;
}

这里我们给的叶片宽高比为：2.5 : 1，如果你想风车叶片更圆润或狭长些，只需要改变它们的比例就行。

接下来，就是剩余两个叶片的样式，利用伪元素before和after来实现的，叶片的形状都是相同的，所以会有统一样式，如下：

.container::before,
.container::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    transform-origin: right center;
}

.container::before{
    background-color: gold;
    transform: rotate(120deg);
}

.container::after{
    background-color: rgb(255, 0, 149);
    transform: rotate(240deg);

}

最后，我们需要风车叶片动起来，添加一个简单的动画即可，如下：

.container {
    animation: _animate 2s linear infinite;
}
 @keyframes _animate{
    100%{
        transform: rotate(360deg);
    }
}

效果

因为这个动画效果很容易想象出来，所以就没放在代码片段中，下面就让我们看看它静态的样子，如下：

总结

其实风车叶片的效果可以进行扩展，比如变成树叶、变成三叶草☘️的形状、变成一朵花等等，有兴趣的可以尝试一下。