css制作风车

使用CSS制作风车效果

通过CSS的transform和animation属性可以创建旋转的风车效果。以下是一个完整的实现方法：

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: 100px auto;
}

.blade {
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #f00;
  top: 90px;
  left: 50px;
  transform-origin: 0 50%;
  animation: rotate 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: 40px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
  top: 80px;
  left: 80px;
  z-index: 10;
}

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

实现原理

1. 基础结构：使用一个容器windmill作为风车底座，内部包含四个叶片和一个中心点
2. 叶片定位：所有叶片使用绝对定位，初始位置重叠
3. 旋转分布：通过transform: rotate()将四个叶片均匀分布在圆周上（每90度一个）
4. 旋转动画：定义rotate关键帧动画实现无限旋转效果
5. 旋转中心：通过transform-origin设置叶片以左端为中心旋转

自定义选项

1. 改变颜色：修改.blade的background-color属性可调整叶片颜色
2. 调整速度：修改animation-duration的值（如1s加快，3s减慢）
3. 叶片形状：通过border-radius或clip-path可创建不同形状的叶片
4. 叶片数量：增加或减少.blade元素数量，并调整旋转角度（如60度间隔6个叶片）

响应式调整

添加媒体查询使风车适应不同屏幕尺寸：

@media (max-width: 600px) {
  .windmill {
    transform: scale(0.7);
  }
}