风车制作css

使用纯CSS制作风车效果

通过CSS的transform和animation属性可以实现风车旋转效果。以下是实现步骤和代码示例：

<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: 60px;
  background-color: #3498db;
  top: 20px;
  left: 40px;
  transform-origin: bottom 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);
}

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

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

添加风车支架结构

为了使风车更完整，可以添加支架结构：

<div class="windmill-container">
  <div class="windmill">
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
  </div>
  <div class="tower"></div>
  <div class="base"></div>
</div>

.windmill-container {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 0 auto;
}

.tower {
  position: absolute;
  width: 10px;
  height: 200px;
  background-color: #8b4513;
  bottom: 40px;
  left: 95px;
}

.base {
  position: absolute;
  width: 60px;
  height: 10px;
  background-color: #654321;
  bottom: 30px;
  left: 70px;
}

响应式风车设计

通过CSS变量和媒体查询使风车适应不同屏幕尺寸：

:root {
  --windmill-size: 100px;
  --blade-width: 20px;
  --blade-height: 60px;
}

@media (max-width: 600px) {
  :root {
    --windmill-size: 80px;
    --blade-width: 15px;
    --blade-height: 45px;
  }
}

.windmill {
  width: var(--windmill-size);
  height: var(--windmill-size);
}

.blade {
  width: var(--blade-width);
  height: var(--blade-height);
}

风车悬停效果

添加交互效果，当鼠标悬停时改变旋转速度：

.windmill {
  transition: animation-duration 0.3s ease;
}

.windmill:hover {
  animation-duration: 0.5s;
}

这些CSS技巧可以组合使用，创造出各种风格的风车效果。通过调整颜色、尺寸和动画参数，可以定制不同外观的风车动画。