当前位置：首页 > CSS

风车制作css

2026-04-01 03:02:03CSS

使用纯CSS创建风车动画

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

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

.blade {
  width: 100px;
  height: 20px;
  background-color: #f00;
  position: absolute;
  top: 90px;
  left: 100px;
  transform-origin: left center;
  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); }

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

添加风车支柱

为风车添加支撑结构使其更完整：

风车制作css

.pole {
  width: 10px;
  height: 150px;
  background-color: #333;
  position: absolute;
  bottom: -150px;
  left: 95px;
}

.base {
  width: 60px;
  height: 20px;
  background-color: #666;
  position: absolute;
  bottom: -170px;
  left: 70px;
}

优化风车动画

使风车叶片旋转更平滑并添加速度变化：

风车制作css

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

.blade {
  animation: spin 1.5s linear infinite;
  transition: transform 0.3s ease;
}

响应式风车设计

通过CSS变量使风车大小可调整：

:root {
  --windmill-size: 200px;
  --blade-width: calc(var(--windmill-size) / 2);
  --blade-height: calc(var(--windmill-size) / 10);
}

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

完整HTML结构

将CSS与HTML结合实现完整风车：

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

这些代码创建了一个具有四个旋转叶片的风车，包含支撑柱和底座，动画平滑且大小可调整。通过修改CSS变量可以轻松改变风车尺寸，而无需重写整个样式。