css风车制作

使用CSS制作风车效果

通过CSS的动画和变形属性可以实现一个旋转的风车效果。以下是一个简单的实现方法：

HTML结构

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

CSS样式

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

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

.blade:nth-child(1) {
  transform: rotate(0deg) translateY(-50%);
}

.blade:nth-child(2) {
  transform: rotate(90deg) translateY(-50%);
}

.blade:nth-child(3) {
  transform: rotate(180deg) translateY(-50%);
}

.blade:nth-child(4) {
  transform: rotate(270deg) translateY(-50%);
}

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

添加风车中心点

为了使风车看起来更完整，可以添加一个中心圆点：

.windmill::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

调整风车叶片形状

要创建更逼真的风车叶片，可以使用CSS的clip-path属性：

.blade {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 30px;
  height: 80px;
}

控制旋转速度

通过调整动画持续时间可以改变旋转速度：

.blade {
  animation: spin 1s linear infinite; /* 更快旋转 */
}

响应式风车设计

使用视窗单位可以使风车大小随屏幕尺寸变化：

.windmill {
  width: 10vw;
  height: 10vw;
}

.blade {
  width: 2vw;
  height: 6vw;
}

这些CSS技术可以组合使用来创建各种风格的风车效果，通过调整颜色、大小和动画参数可以实现不同的视觉效果。