css focus点击怎么重复进行？

Question

点击切换 上面的框就旋转180°

但是只能切换一次 第二次按就没用了 怎么能让他按一次旋转一次呢 用keyframes动画或者transition

求解答！

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

**解决这个问题的关键在于让animation-play-state属性可以动态切换，以实现连续的点击效果。**以下是可能的解决方案：

1. 使用JavaScript控制动画状态：
   • 在HTML中添加一个按钮或者<input type="button">，作为触发连续旋转的按钮。
   • 使用JavaScript监听这个按钮的点击事件，每次点击时改变animation-play-state的状态。

<button id="toggleButton">点击切换</button>
<input type="checkbox" id="checkbox" class="bigk" />

<script>
document.getElementById("toggleButton").addEventListener("click", function() {
  const checkbox = document.getElementById("checkbox");
  if (checkbox.classList.contains("paused")) {
    checkbox.style.animationPlayState = "running";
  } else {
    checkbox.style.animationPlayState = "paused";
  }
});
</script>

1. CSS中使用:hover伪类结合JavaScript：
   • 如果你的目标是鼠标悬停时切换，可以使用:hover伪类，配合JavaScript来控制动画状态。

.bigk:hover {
  animation-play-state: running;
}

1. 利用data-*属性存储状态：
   • 可以在元素上添加data-state属性，并在JavaScript中检查它的值，来决定是否播放动画。

<input type="checkbox" id="checkbox" data-state="paused" class="bigk" ...>

<script>
const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("click", function() {
  this.dataset.state = this.dataset.state === "paused" ? "running" : "paused";
});
</script>

以上任一方案都可以让你的元素在每次点击时重复执行旋转动画。选择最适合你的场景的方法即可。