当前位置：首页 > CSS

css风车制作

2026-02-27 08:53:53CSS

使用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: #FF5722;
  border-radius: 10px;
  transform-origin: 50% 100%;
}

.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); }
}

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

添加3D效果的风车

通过CSS的perspective和transform-style属性增强立体感：

css风车制作

.windmill {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.blade {
  transform: rotateY(30deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

响应式风车设计

使用CSS变量和calc()函数使风车尺寸可调整：

css风车制作

:root {
  --windmill-size: 150px;
  --blade-width: calc(var(--windmill-size) * 0.2);
  --blade-height: calc(var(--windmill-size) * 0.6);
}

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

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

风车中心点样式

添加中心圆点增强视觉效果：

.windmill::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}