css制作风车

使用CSS制作风车效果

通过CSS的动画和变换属性可以轻松实现一个旋转的风车效果。以下是完整的实现方法：

HTML结构

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

CSS样式

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

.blade {
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #3498db;
  top: 90px;
  left: 50px;
  transform-origin: 0 50%;
  animation: spin 2s linear infinite;
}

.blade:nth-child(1) { transform: rotate(0deg); }
.blade:nth-child(2) { transform: rotate(90deg); }
.blade:nth-child(3) { transform: rotate(180deg); }
.blade:nth-child(4) { transform: rotate(270deg); }

.center {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #e74c3c;
  border-radius: 50%;
  top: 85px;
  left: 85px;
  z-index: 10;
}

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

实现原理

风车由四个叶片和一个中心圆点组成。每个叶片通过绝对定位放置在相同位置，然后分别旋转0°、90°、180°和270°形成十字形状。

transform-origin属性设置旋转中心点为叶片左侧中点。动画使用@keyframes定义从0°到360°的无限循环旋转，使所有叶片同步转动。

自定义选项

修改风车大小可调整.windmill容器的宽高。改变.blade的宽高可调整叶片尺寸。background-color可更改颜色。动画持续时间（2s）可调整旋转速度。

浏览器兼容性

该效果支持所有现代浏览器，包括Chrome、Firefox、Safari和Edge。如需支持IE10及以下版本，需要添加-webkit和-ms前缀。