HTML CSS JavaScript 风车动画：按钮控制转动速度


CSS 代码：

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

.windmill img { width: 100%; height: 100%; }

.windmill.rotate { animation: rotate 5s linear infinite; }

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


JavaScript 代码：

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 speed = 5; // 初始速度为 5s/圈

startBtn.onclick = function() { windmill.classList.add('rotate'); }

speedUpBtn.onclick = function() { windmill.style.animationDuration = (speed - 1) + 's'; speed--; }

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

stopBtn.onclick = function() { windmill.classList.remove('rotate'); }


**解释：**

首先，我们使用 `querySelector` 方法获取风车和四个按钮的元素，并定义一个变量 `speed` 来保存风车的速度，初始速度为 5s/圈。

然后，我们为开始按钮绑定点击事件。当点击开始按钮时，为风车元素添加 `rotate` 类，该类在 CSS 中定义了一个动画效果，使风车旋转起来。

接着，我们为加速按钮和减速按钮分别绑定点击事件。当点击加速按钮时，我们将风车动画的持续时间减 1 秒，使速度变快；当点击减速按钮时，我们将风车动画的持续时间加 1 秒，使速度变慢。同时，我们也更新 `speed` 变量的值。

最后，我们为结束按钮绑定一个点击事件。当点击结束按钮时，移除风车元素的 `rotate` 类，使风车停止转动。