天气炎热，搞个电风扇吹吹风

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

现在，一打开天气，马上引入眼帘的就是高温预警，随着气温越来越高，相信很多小伙伴已经没有心思工作了，这时候作为前端的我们，就不能自己想想办法吗，这不得自己搞个风扇降将温，虽然不能物理降温，但是，看着还是能够感觉到一丝丝凉意思的，话不多说，说干就干。

先看一下我们的原型图：

零件看着也不多，拆过电风扇的小伙伴应该知道，核心就是一个扇叶、控制开关、风扇罩，其余的都是些装饰品。首先，我们来实现我们的风扇罩和扇叶，这个功能比较简单好实现，无非就是CSS3中的一些特性，例如圆角呀、旋转呀等等特性。那接下来我们就来实现一下我们的扇叶以及罩子：

<!-- 罩子 -->
<div class="top-part">
  <!-- 风扇罩上的装饰线 -->
  <div class="line-box">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="mid-dot"></div>
  </div>
  <!-- 扇叶 -->
  <div class="left-box" id="leaf-id">
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
  </div>
</div>
复制代码

好了现在结构已经很明确的，接下来就是使用CSS来风扇罩和扇叶的显示效果了:

.top-part {
  width: 220px;
  height: 220px;
  box-sizing: border-box;
  position: relative;
}
.top-part .left-box {
  width: 220px;
  height: 220px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 8px solid #333;
}
.top-part .left-box .leaf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 100px;
  margin-left: -25px;
  border-radius: 50%;
  background-color: rgb(106, 106, 235);
  margin-top: -100px;
}
.top-part .left-box .leaf:nth-child(2) {
  transform: rotate(120deg);
  transform-origin: 50% 100%;
}
.top-part .left-box .leaf:nth-child(3) {
  transform: rotate(240deg);
  transform-origin: 50% 100%;
}
.line-box .line {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 212px;
  height: 2px;
  background-color: #333;
  z-index: 10;
}
.line-box .line:nth-child(2) {
  transform: rotate(30deg);
}
.line-box .line:nth-child(3) {
  transform: rotate(60deg);
}
.line-box .line:nth-child(4) {
  transform: rotate(90deg);
}
.line-box .line:nth-child(5) {
  transform: rotate(120deg);
}
.line-box .line:nth-child(6) {
  transform: rotate(150deg);
}
.line-box .mid-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  background-color: #333;
  z-index: 11;
  border-radius: 50%;
}
复制代码

现在我们的风扇上半部分已经完成了，效果如下：

是不是很像一个车轮

接下俩我们来实现风扇的控制开关那一部分，先看一下DOM结构：

<div class="bom-part">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">关</div>
</div>
复制代码

其中有三个按钮，分别对应不同的挡位，后期我们需要为其绑定事件，让风扇转起来。接下里使用css对样式做出调整:

.bom-part {
  width: 50px;
  height: 200px;
  background-color: #333;
  position: absolute;
  top: 215px;
  left: 50%;
  margin-left: -25px;
}
.bom-part .item {
  color: white;
  width: 22px;
  height: 22px;
  background-color: rgb(106, 106, 235);
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  margin-top: 15px;
  cursor: pointer;
}
复制代码

现在整个风扇的结构以及搭建好了，接下来使用动画让风扇转起来、

.leaf-ani1 {
  animation: ani 1s infinite linear;
}
.leaf-ani2 {
  animation: ani 0.8s infinite linear;
}
.leaf-ani3 {
  animation: ani 0.5s infinite linear;
}
@keyframes ani {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
复制代码

同时，我们还需为其对应的按钮绑定上对应的事件：

const btn1 = document.getElementsByClassName('item')[0]
const btn2 = document.getElementsByClassName('item')[1]
const btn3 = document.getElementsByClassName('item')[2]
const btn4 = document.getElementsByClassName('item')[3]
btn1.addEventListener('click', handleOpen.bind(this, 1))
btn2.addEventListener('click', handleOpen.bind(this, 2))
btn3.addEventListener('click', handleOpen.bind(this, 3))
btn4.addEventListener('click', handleOpen.bind(this, null))

function handleOpen(type) {
  let dom = document.getElementById("leaf-id");
  if (type) {
    dom.setAttribute("class", "left-box leaf-ani" + type)
  } else {
    dom.setAttribute("class", "left-box");
  }
}
复制代码

至此，一个简易版的电风扇就完成了。代码片段

天气炎热，搞个电风扇吹吹风

猜你喜欢