电风扇用html+css+js设计

设计一个电风扇可以分为两个部分，一是外观设计，二是风扇控制。

1. 外观设计

首先，我们可以使用 HTML 和 CSS 来设计电风扇的外观，主要包括风扇的框架和叶片。下面是一个简单的 HTML 和 CSS 代码示例：

<div class="fan">
  <div class="blades">
    <div class="blade blade1"></div>
    <div class="blade blade2"></div>
    <div class="blade blade3"></div>
    <div class="blade blade4"></div>
  </div>
  <div class="base"></div>
</div>

.fan {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  position: relative;
  overflow: hidden;
}

.blades {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center;
  animation: spin 2s linear infinite;
}

.blade {
  width: 60%;
  height: 10px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blade1 {
  transform: rotate(0deg);
}

.blade2 {
  transform: rotate(90deg);
}

.blade3 {
  transform: rotate(180deg);
}

.blade4 {
  transform: rotate(270deg);
}

.base {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的代码中，我们使用了一个 div 元素来表示电风扇的外框，并通过设置其 border-radius 属性为 50% 来实现圆形效果。然后，在 div 元素内部，我们添加了一个 div 元素来表示风扇的叶片，并设置其为绝对定位。同时，我们使用 CSS 中的 transform 属性来旋转叶片，使其呈现出风扇的效果。最后，我们添加了一个 div 元素来表示风扇的底座。

2. 风扇控制

在风扇控制方面，我们可以使用 JavaScript 来实现。下面是一个简单的代码示例：

<div class="fan">
  <div class="blades">
    <div class="blade blade1"></div>
    <div class="blade blade2"></div>
    <div class="blade blade3"></div>
    <div class="blade blade4"></div>
  </div>
  <div class="base"></div>
</div>

<button onclick="startFan()">启动</button>
<button onclick="stopFan()">停止</button>

<script>
  var fan = document.querySelector('.blades');

  function startFan() {
    fan.style.animationPlayState = 'running';
  }

  function stopFan() {
    fan.style.animationPlayState = 'paused';
  }
</script>

在上面的代码中，我们首先获取了风扇叶片的 div 元素，并定义了两个 JavaScript 函数 startFan 和 stopFan 分别用于启动和停止风扇。在 startFan 函数中，我们设置了风扇叶片的 animationPlayState 属性为 'running'，从而启动了风扇的旋转动画。在 stopFan 函数中，我们将 animationPlayState 属性设置为 'paused'，从而停止了风扇的旋转动画。

通过上述的 HTML、CSS 和 JavaScript 代码，我们就可以实现一个简单的电风扇，并可以通过 JavaScript 控制风扇的启动和停止。