css制作风车

使用CSS制作风车效果

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

创建风车叶片结构

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

设置基础样式

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

.blade {
  position: absolute;
  width: 20px;
  height: 80px;
  background-color: #f00;
  top: 10px;
  left: 40px;
  transform-origin: 50% 100%;
}

定位并旋转叶片

.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);
}

添加旋转动画

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

.windmill {
  animation: spin 2s linear infinite;
}

增强视觉效果

可以添加中心点和叶片渐变效果：

.windmill::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  top: 40px;
  left: 40px;
}

.blade {
  background: linear-gradient(to bottom, #f00, #900);
  border-radius: 10px 10px 0 0;
}

响应式调整

通过媒体查询调整风车大小：

@media (max-width: 600px) {
  .windmill {
    width: 60px;
    height: 60px;
  }
  .blade {
    width: 15px;
    height: 50px;
  }
  .windmill::after {
    width: 15px;
    height: 15px;
    top: 22px;
    left: 22px;
  }
}

最终效果

这个CSS风车会持续旋转，具有四个红色渐变叶片和一个中心点。旋转速度和风车大小可以根据需要调整。通过修改颜色、形状和动画属性，可以创建不同风格的风车效果。