转动着风车叶，飞向更广阔的世界

在 HTML+CSS+JS 的世界里，我们可以创造出千变万化的视觉效果。今天，我们就来制作一个好玩有趣的风车屋。

首先，我们先来构建风车屋的基本结构。

```html
<div class="windmill">
  <div class="roof"></div>
  <div class="body"></div>
  <div class="blades">
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
  </div>
</div>

.windmill {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.roof {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ff0000;
}

.body {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #ffffff;
}

.blades {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blade {
  position: absolute;
  width: 50px;
  height: 100px;
  background-color: #000000;
  transform-origin: bottom left;
  animation: spin 10s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

这个基本结构里，我们定义了一个风车屋的容器，并设置了它的位置和大小。然后，我们创建了风车屋的屋顶、主体和风车叶。屋顶和主体都是简单的矩形，而风车叶则是一个由三个矩形组成的三角形。

接着，我们来为风车屋添加一些 CSS 样式，让它看起来更加美观。

.windmill {
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #888888;
}

.roof {
  background-color: #ff0000;
  border-radius: 10px 10px 0 0;
}

.body {
  background-color: #ffffff;
}

.blades {
  transform: translate(-50%, -50%);
}

.blade {
  background-color: #000000;
  transform-origin: bottom left;
  animation: spin 10s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

现在，我们的风车屋已经初具雏形了，接下来，我们就来让它动起来。

const blades = document.querySelectorAll('.blade');

window.addEventListener('load', () => {
  blades.forEach((blade) => {
    blade.style.animationPlayState = 'running';
  });
});

这段 JavaScript 代码会让风车叶旋转起来，让风车屋看起来更加生动。

这就是我们用 HTML+CSS+JS 制作的风车屋，大家可以根据自己的喜好进行修改，让它变得更加独特。希望大家都能享受这个过程，并从中有所收获。