风车制作css

2026-02-27 03:38:37CSS

使用CSS制作风车动画

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

HTML结构

<div class="windmill">
  <div class="blades"></div>
  <div class="tower"></div>
</div>

CSS样式

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

.tower {
  width: 20px;
  height: 200px;
  background: #555;
  margin: 0 auto;
}

.blades {
  width: 100px;
  height: 100px;
  background: transparent;
  border-radius: 50%;
  position: relative;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  animation: spin 2s linear infinite;
}

.blades::before, .blades::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 20px;
  background: #f7931e;
  top: 40px;
}

.blades::before {
  transform: rotate(45deg);
}

.blades::after {
  transform: rotate(-45deg);
}

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

进阶风车设计

增加更多叶片和阴影效果：

.blades {
  /* 原有样式保持不变 */
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.blades::before, .blades::after,
.blades span {
  /* 新增两个叶片 */
  width: 80px;
  height: 15px;
  background: linear-gradient(to right, #f7931e, #ffcc00);
}

.blades span {
  position: absolute;
  display: block;
  top: 42px;
  left: 10px;
}

.blades span:nth-child(1) {
  transform: rotate(90deg);
}

.blades span:nth-child(2) {
  transform: rotate(-90deg);
}

响应式风车调整

通过CSS变量控制风车大小：

风车制作css

:root {
  --windmill-size: 200px;
}

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

@media (max-width: 600px) {
  :root {
    --windmill-size: 150px;
  }
}

这些方法可以创建出不同风格的风车效果，通过调整动画时间、叶片数量和颜色等参数可实现多样化设计。