JS 控制风车动画：开始、加速、减速、停止

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

.blade { position: absolute; top: 50%; left: 50%; width: 100px; height: 10px; margin-top: -5px; margin-left: -50px; background-color: #fff; transform-origin: left center; }

.blade1 { transform: rotate(0deg); animation: bladeRotate 2s linear infinite; }

.blade2 { transform: rotate(90deg); animation: bladeRotate 2s linear infinite; }

.blade3 { transform: rotate(180deg); animation: bladeRotate 2s linear infinite; }

.blade4 { transform: rotate(270deg); animation: bladeRotate 2s linear infinite; }

.center { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; background-color: #34495e; }

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

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

var windmill = document.querySelector('.windmill'); var startBtn = document.querySelector('#startBtn'); var speedUpBtn = document.querySelector('#speedUpBtn'); var speedDownBtn = document.querySelector('#speedDownBtn'); var stopBtn = document.querySelector('#stopBtn'); var currentSpeed = 2;

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

function speedUpWindmill() { currentSpeed += 0.5; windmill.style.animationDuration = 2 / currentSpeed + 's'; }

function speedDownWindmill() { if (currentSpeed > 0.5) { currentSpeed -= 0.5; windmill.style.animationDuration = 2 / currentSpeed + 's'; } }

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

startBtn.addEventListener('click', startWindmill); speedUpBtn.addEventListener('click', speedUpWindmill); speedDownBtn.addEventListener('click', speedDownWindmill); stopBtn.addEventListener('click', stopWindmill);


首先，我们使用 `querySelector` 方法获取 HTML 中的元素，包括风车和四个按钮。

接下来，我们定义四个函数，分别对应四个按钮的功能：

- `startWindmill` 函数用于开始风车转动，即将风车的 `animation-play-state` 属性设置为 `running`。
- `speedUpWindmill` 函数用于加速风车转动，即将风车的 `animation-duration` 属性缩短，从而使风车转动速度加快。
- `speedDownWindmill` 函数用于减速风车转动，即将风车的 `animation-duration` 属性延长，从而使风车转动速度减慢。
- `stopWindmill` 函数用于停止风车转动，即将风车的 `animation-play-state` 属性设置为 `paused`。

最后，我们通过 `addEventListener` 方法将以上四个函数分别绑定到四个按钮的 `click` 事件上，从而实现按钮控制风车转动的功能。同时，我们使用一个 `currentSpeed` 变量来记录当前风车转动的速度，以便在加速和减速时进行计算。