风车制作css

使用CSS创建风车动画

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

HTML结构

<div class="windmill">
  <div class="blades"></div>
  <div class="tower"></div>
</div>

CSS样式

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

.tower {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 200px;
  background: #888;
  transform: translateX(-50%);
}

.blades {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 100px;
  height: 100px;
  transform-origin: center 150px;
  animation: spin 5s linear infinite;
}

.blades::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100px;
  background: #f5f5f5;
  left: 40px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.blades::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 20px;
  background: #f5f5f5;
  top: 40px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

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

添加更多叶片

要使风车看起来更真实，可以增加叶片数量：

.blades {
  /* 原有样式保持不变 */
  transform-origin: center 150px;
}

.blades::before,
.blades::after,
.blades span:nth-child(1),
.blades span:nth-child(2) {
  position: absolute;
  width: 20px;
  height: 100px;
  background: #f5f5f5;
  left: 40px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.blades span:nth-child(1) {
  transform: rotate(45deg);
}

.blades span:nth-child(2) {
  transform: rotate(-45deg);
}

响应式调整

为适应不同屏幕尺寸，可以添加媒体查询：

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

性能优化建议

使用will-change属性提升动画性能：

.blades {
  will-change: transform;
}

通过以上CSS代码，可以创建一个平滑旋转的风车动画效果。根据实际需求可调整尺寸、颜色和旋转速度等参数。