使用 JavaScript 按钮控制风车转动 - 动态动画效果

#windmill {
  width: 200px;
  height: 200px;
  background-color: #f9f9f9;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  animation: rotate 2s linear infinite;
}

#windmill:before,
#windmill:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 80px;
  background-color: #555;
  transform-origin: top center;
  border-radius: 5px;
}

#windmill:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#windmill:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

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

.rotate-slow {
  animation-duration: 4s;
}

.rotate-fast {
  animation-duration: 1s;
}

var windmill = document.getElementById('windmill');
var startBtn = document.getElementById('start');
var accelerateBtn = document.getElementById('accelerate');
var decelerateBtn = document.getElementById('decelerate');
var stopBtn = document.getElementById('stop');
var speed = 2;

startBtn.onclick = function() {
  windmill.style.animationPlayState = 'running';
}

accelerateBtn.onclick = function() {
  speed += 1;
  windmill.style.animationDuration = 2 / speed + 's';
}

decelerateBtn.onclick = function() {
  if (speed > 1) {
    speed -= 1;
    windmill.style.animationDuration = 2 / speed + 's';
  }
}

stopBtn.onclick = function() {
  windmill.style.animationPlayState = 'paused';
}

解释说明：

1. 首先获取页面上的元素，包括风车、四个按钮。
2. 给开始按钮绑定点击事件，当点击开始按钮时，将风车的动画播放状态设置为“running”，即开始转动。
3. 给加速按钮绑定点击事件，每点击一次，将速度加1，并根据新的速度重新计算动画的持续时间，使风车转动越来越快。
4. 给减速按钮绑定点击事件，每点击一次，将速度减1，并根据新的速度重新计算动画的持续时间，使风车转动越来越慢。需要注意的是，速度不能小于1，否则动画会出错。
5. 给结束按钮绑定点击事件，当点击结束按钮时，将风车的动画播放状态设置为“paused”，即停止转动。