html风车旋转动画

要实现HTML风车旋转动画，可以使用CSS3的动画属性。具体实现步骤如下：

1. 创建一个div元素，设置宽高和背景颜色，作为风车的主体。
2. 在div元素内部创建四个div元素，分别代表风车的四个叶片。设置宽高、背景颜色和旋转中心点。
3. 使用CSS3的@keyframes规则定义旋转动画，设置叶片的旋转角度和时间。
4. 将动画应用到叶片上，设置动画的持续时间、重复次数和动画曲线。

以下是示例代码：

HTML部分：

<div class="windmill">
  <div class="blade"></div>
  <div class="blade"></div>
  <div class="blade"></div>
  <div class="blade"></div>
</div>

CSS部分：

.windmill {
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
  position: relative;
}

.blade {
  width: 50px;
  height: 50px;
  background-color: #e67e22;
  position: absolute;
  top: 25px;
  left: 25px;
  transform-origin: center center;
  animation: rotate 2s linear infinite;
}

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