css制作风车

2026-03-11 20:28:55CSS

使用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: 50px auto;
}

.blade {
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #f00;
  top: 90px;
  left: 100px;
  transform-origin: left center;
}

.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: #333;
  border-radius: 50%;
  top: 85px;
  left: 85px;
}

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

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

进阶风车效果

要创建更真实的风车效果，可以调整叶片形状和旋转速度：

修改叶片CSS

.blade {
  width: 80px;
  height: 30px;
  background: linear-gradient(to right, #f00, #ff8c00);
  border-radius: 15px 5px 5px 15px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

调整动画

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

响应式风车设计

为了使风车适应不同屏幕尺寸，可以使用相对单位：

css制作风车

.windmill {
  width: 20vw;
  height: 20vw;
  max-width: 300px;
  max-height: 300px;
}

.blade {
  width: 10vw;
  height: 2vw;
  top: 9vw;
  left: 10vw;
}

.center {
  width: 3vw;
  height: 3vw;
  top: 8.5vw;
  left: 8.5vw;
}

这些CSS技巧可以创建出不同风格的风车效果，通过调整颜色、尺寸和动画参数可以获得各种视觉表现。