css风车制作

使用CSS制作风车效果

通过CSS的动画和变形属性可以创建一个简单的风车效果。以下是实现方法：

HTML结构

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

CSS样式

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

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

.blades {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: spin 2s linear infinite;
}

.blades::before, .blades::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 100px solid #f7931e;
  top: 50%;
  left: 50%;
}

.blades::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.blades::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

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

添加更多风车叶片

要创建四叶片风车，可以修改CSS如下：

.blades::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.blades::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.blades span {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 100px solid #f7931e;
  top: 50%;
  left: 50%;
}

.blades span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.blades span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(135deg);
}

创建3D风车效果

添加一些透视和阴影可以增强立体感：

.windmill {
  perspective: 1000px;
}

.blades {
  transform-style: preserve-3d;
}

.blades::before, .blades::after {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

控制风车速度

通过调整动画持续时间可以改变旋转速度：

.blades {
  animation: spin 1s linear infinite; /* 更快 */
  /* animation: spin 5s linear infinite; */ /* 更慢 */
}

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