我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

正值夏天，我们来做一个风扇吹吹风吧

代码

正文

我们先用html把风扇的结构弄出来，首先需要的是扇叶，我这里设计了四个，代码如下：

<div class="box">
    <div class="yezi"></div>
    <div class="yezi"></div>
    <div class="yezi"></div>
    <div class="yezi"></div>
</div>

然后给它们增加样式，是利用border来控制形状，就是设置border的宽度，然后把三个border颜色设置为透明，其中一个设置成想要的颜色，这样就形成了梯形（扇叶），然后把每个扇叶都利用transform属性旋转到合适的位置，代码如下：

.yezi{
    width: 100px;
    border: 80px solid #ffb61e;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right: transparent;
    position: absolute;
}
.yezi:nth-child(2){
    transform: rotate(90deg);
    left: 170px;
    top: -10px;
    border-bottom-color: #ff4777;
}
.yezi:nth-child(3){
    transform: rotate(180deg);
        left: 180px;
top: 160px;
    border-bottom-color: #16a951;
}
.yezi:nth-child(4){
    transform: rotate(270deg);
        left: 10px;
top: 170px;
    border-bottom-color: #ff461f;
}

效果图：

接着我们使用css动画animation试着让它动起来。先定义个动画效果，让整体box从0deg旋转到360deg，代码如下：

@keyframes Dong{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(180deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

然后再box元素加动画属性 animation: Dong 0.1s linear infinite;，让风扇循环转动，这样就可以动起来了。效果图如下（动图跟不上0.0）：

最后我们再把它优化一下，加上档位和杆子：

<div class="gunzi"></div>
<div class="btn-box">
    <div class="btn " data-cl="1">一档</div>
    <div class="btn "  data-cl="2">二档</div>
    <div class="btn "  data-cl="3">三档</div>
    <div class="btn "  data-cl="0">零档</div>
</div>

效果图：

档位我们设置了3挡，先在css写上每个档位的速度，然后使用js给box动图加上对应的速度类名：

css：

.box.dang1{
    animation: Dong 0.3s linear infinite;
}
.box.dang2{
    animation: Dong 0.1s linear infinite;
}
.box.dang3{
    animation: Dong 0.005s linear infinite;
}

js：

$(".btn").on("click", function() {
    let data = $(this).data("cl");
    $(".box").removeClass("dang1").removeClass("dang2").removeClass("dang3");
    $(".box").addClass("dang" + data);
})

到这里我们的小风扇就完成，来看看效果：