Html 我有两个复选框来控制动画的速度，我需要将它们组合成一个按钮，随着每次按下按钮而递增

目前，我有两个复选框控制动画风扇的速度，给我四个速度（无复选框=速度0；每个复选框分别选中=速度1和2；两个复选框一起选中=速度3）。现在，我需要它是一个按钮，通过每个速度循环。我还需要第二个按钮来反转风扇，但我可以稍后再担心。

听起来您想要的解决方案需要javascript，因此我会直接让您参考我提供的代码片段中的第二个示例。还有第一个代码片段可以看到使用CSS时的效果，尽管CSS本身无法跟踪您单击的次数，因此第二个代码片段无法让动画一次又一次地加速/减速

constmydiv=document.querySelector（“javascript”）；
myDiv.addEventListener（“单击”，函数（）{
//获取当前CSS样式
const currentDuration=parseFloat（myDiv.style.animationDuration[0]）；
//将循环时间缩短一半，从而加快速度
const newDuration=currentDuration/2；
//使用字符串文字来更改CSS
myDiv.style.animationDuration=`${newDuration}s`
})

@关键帧myanimation{
0% {
背景色：红色；
}
50% {
背景颜色：蓝色；
}
100% {
背景色：红色；
}
}
p{
背景色：红色；
宽度：100px；
高度：100px；
动画：myanimation 4s无限；
}
p:活跃的{
边框：10px纯黑；
动画持续时间：8秒；
}
#javascript{
宽度：100px；
高度：100px；
背景：红色；
动画：我的动画无限；
}

CSS解决方案（无内存）


JS解决方案（带内存）