当前位置：首页 > CSS

css制作电风扇

2026-04-02 13:24:52CSS

使用CSS制作电风扇动画

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

HTML结构

<div class="fan">
  <div class="blades"></div>
  <div class="base"></div>
</div>

CSS样式

css制作电风扇

.fan {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
}

.blades {
  width: 100%;
  height: 100%;
  background: #333;
  border-radius: 50%;
  position: relative;
  animation: spin 2s linear infinite;
}

.blades:before, .blades:after {
  content: '';
  position: absolute;
  background: #555;
  width: 20px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform-origin: left center;
}

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

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

.base {
  width: 80px;
  height: 100px;
  background: #666;
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px 10px 0 0;
}

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

添加更多扇叶

要创建更真实的电风扇效果，可以添加第三个扇叶：

.blades {
  /* 其他样式不变 */
}

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

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

.blades .third-blade {
  position: absolute;
  background: #555;
  width: 20px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(240deg);
}

控制风扇速度

通过修改动画持续时间可以控制风扇转速：

css制作电风扇

/* 慢速 */
.slow {
  animation: spin 4s linear infinite;
}

/* 中速 */
.medium {
  animation: spin 2s linear infinite;
}

/* 快速 */
.fast {
  animation: spin 1s linear infinite;
}

添加交互控制

使用JavaScript可以添加风扇开关和速度控制：

const fan = document.querySelector('.blades');
fan.style.animationPlayState = 'paused';

document.getElementById('toggle').addEventListener('click', () => {
  if (fan.style.animationPlayState === 'paused') {
    fan.style.animationPlayState = 'running';
  } else {
    fan.style.animationPlayState = 'paused';
  }
});

优化视觉效果

添加阴影和渐变效果使风扇更逼真：

.blades {
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  background: radial-gradient(circle, #444 0%, #222 100%);
}

.base {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  background: linear-gradient(to bottom, #777 0%, #555 100%);
}