当前位置：首页 > CSS

css风车制作

2026-04-01 08:35:51CSS

使用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); }
}

风车优化版本

增加更多视觉效果和交互性：

.blade {
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.windmill:hover .blade {
  animation-play-state: paused;
  background-color: #2980b9;
}

.center {
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

响应式风车

使风车能够适应不同屏幕尺寸：

@media (max-width: 600px) {
  .windmill {
    width: 150px;
    height: 150px;
  }
  .blade {
    width: 75px;
    top: 65px;
    left: 37px;
  }
  .center {
    width: 25px;
    height: 25px;
    top: 62px;
    left: 62px;
  }
}

3D风车效果

增加透视效果使风车更具立体感：

css风车制作

.windmill {
  perspective: 1000px;
}

.blade {
  transform-style: preserve-3d;
  transform: rotateX(20deg);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

这些CSS代码组合起来可以创建一个美观且交互性强的风车效果，通过调整参数可以改变风车的大小、颜色和旋转速度。