夏天里的清凉——用CSS3打造的电风扇动画演示

在这个酷热的夏天，我们来一起制作一个清新凉爽的纯CSS3电风扇动画DEMO。它不仅能够为你的网站增添一丝凉意，更重要的是它可以帮助你度过这个炎热的夏天，让你清凉一夏！

在这个炎炎夏日，还有什么比一台清凉的电风扇更能让人感到惬意呢？今天，我们就来用纯CSS3代码制作一个生动逼真的电风扇动画演示，让你的网站也凉爽起来！

创建风扇叶片

首先，我们需要创建电风扇的叶片。我们可以使用以下CSS代码：

.fan-blade {
  width: 100px;
  height: 20px;
  background-color: #000;
  transform-origin: 50% 100%;
  animation: spin 2s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这段代码创建了一个100像素宽、20像素高的黑色矩形，并将其旋转中心设置为矩形的右下角。然后，我们应用了一个名为“spin”的动画，它将矩形旋转360度，无限循环。

创建风扇底座

接下来，我们需要创建风扇的底座。我们可以使用以下CSS代码：

.fan-base {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  border-radius: 50%;
}

这段代码创建了一个50像素宽、50像素高的灰色圆形，它将作为风扇的底座。

组装风扇

现在，我们需要将风扇叶片和底座组装在一起。我们可以使用以下HTML代码：

<div class="fan">
  <div class="fan-base"></div>
  <div class="fan-blade"></div>
  <div class="fan-blade"></div>
  <div class="fan-blade"></div>
</div>

这段代码创建了一个“fan”类，其中包含“fan-base”类（底座）和三个“fan-blade”类（叶片）。

旋转风扇

最后，我们需要让风扇旋转起来。我们可以使用以下JavaScript代码：

var fan = document.querySelector(".fan");

setInterval(function() {
  fan.classList.toggle("spinning");
}, 1000);

这段代码首先获取“fan”类的元素，然后每1000毫秒（1秒）切换一次“spinning”类。这将使风扇旋转和停止。

总结

就是这样！我们已经使用纯CSS3代码创建了一个生动逼真的电风扇动画演示。它可以为你的网站增添一丝凉意，也可以帮助你度过这个炎热的夏天。