当前位置：首页 > CSS

风车制作css

2026-01-08 21:18:05CSS

风车制作CSS方法

使用CSS创建风车效果可以通过动画和变换属性实现。以下是一个简单的风车旋转动画示例：

HTML结构

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

CSS样式

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

.blades {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50px;
  animation: spin 2s linear infinite;
}

.blades::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #e74c3c;
  top: 40px;
  left: 0;
  transform-origin: right center;
}

.blades::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #e74c3c;
  top: 40px;
  left: 0;
  transform: rotate(90deg);
  transform-origin: right center;
}

.stand {
  width: 20px;
  height: 200px;
  background-color: #7f8c8d;
  position: absolute;
  bottom: 0;
  left: 90px;
}

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

进阶风车设计

创建更复杂风车效果可以添加更多叶片和细节：

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

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

/* 添加更多叶片 */
.blades {
  background: conic-gradient(
    #e74c3c 0deg 90deg,
    #3498db 90deg 180deg,
    #2ecc71 180deg 270deg,
    #f1c40f 270deg 360deg
  );
}

/* 添加风车中心点 */
.blades::after {
  content: "";
  width: 20px;
  height: 20px;
  background: #2c3e50;
  border-radius: 50%;
  top: 40px;
  left: 40px;
}

响应式风车设计

使风车适应不同屏幕尺寸：

风车制作css

@media (max-width: 600px) {
  .windmill {
    width: 150px;
    height: 225px;
  }

  .blades {
    width: 75px;
    height: 75px;
    top: 37px;
    left: 37px;
  }

  .stand {
    width: 15px;
    height: 150px;
    left: 67px;
  }
}

这些CSS代码创建了一个基本的风车动画效果，可以根据需要调整颜色、大小和旋转速度。通过修改@keyframes中的时间和transform属性，可以创建不同的旋转效果。