使用 HTML 和 CSS 设计工作台风扇

本文将介绍使用 HTML 和 CSS 设计一个简单的工作台风扇。

HTML 结构

首先我们需要创建 HTML 结构。

<div class="fan">
  <div class="blade blade-1"></div>
  <div class="blade blade-2"></div>
  <div class="blade blade-3"></div>
  <div class="blade blade-4"></div>
  <div class="blade blade-5"></div>
  <div class="center"></div>
</div>

在这段 HTML 中，我们创建了一个 div 元素，并在其中放置了 6 个子元素，分别代表了风扇的 5 个扇叶和风扇的中心。

CSS 样式

接下来，我们需要添加 CSS 样式实现风扇的旋转。

.fan {
  width: 100px;
  height: 100px;
  position: relative;
}

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

.blade-1 {
  transform: rotate(0deg);
}

.blade-2 {
  transform: rotate(72deg);
}

.blade-3 {
  transform: rotate(144deg);
}

.blade-4 {
  transform: rotate(216deg);
}

.blade-5 {
  transform: rotate(288deg);
}

.center {
  position: absolute;
  top: 45px;
  left: 45px;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
}

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

在这段 CSS 中，我们首先定义了风扇的大小和相对定位，然后为每个扇叶添加了旋转动画。我们使用 transform: rotate() 实现旋转，并使用 transform-origin 指定旋转中心为左上角。

最后，我们为风扇的中心添加了一个黑色圆点，并将其定位到风扇的中心位置。

效果预览

应用以上 HTML 结构和 CSS 样式，我们可以看到一个简单的工作台风扇。你可以在以下链接中查看效果预览。

点击这里查看效果预览

结语

通过本文，你应该了解了使用 HTML 和 CSS 创建工作台风扇的方法。这只是一个简单的例子，你可以进一步优化代码和样式，实现更加复杂的风扇效果。