HTML CSS动画：点击切换旋转效果

在本文中，我们将介绍如何使用HTML和CSS创建动画效果，并通过点击切换来实现旋转效果。

阅读更多：HTML 教程

动画基础

要创建动画效果，我们需要使用CSS的@keyframes规则来定义关键帧，并通过animation属性来应用动画效果。下面是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

在上面的例子中，我们定义了一个名为rotate的关键帧，它从0%到100%会逐渐旋转360度。然后，我们将这个关键帧应用到一个名为box的div元素上，使用animation属性，持续时间为2秒，线性运动，无限循环。

点击切换旋转效果

我们可以通过JavaScript来实现点击切换动画效果。首先，在CSS中，我们需要定义一个额外的类rotate，将旋转效果应用到这个类上：

.rotate {
  animation-play-state: running;
}

然后，在JavaScript中，我们可以使用classList.toggle()方法来在点击事件中添加或删除rotate类，以达到切换旋转效果的目的：

var box = document.querySelector('.box');

box.addEventListener('click', function() {
  box.classList.toggle('rotate');
});

在上述示例中，当我们点击box元素时，它会添加或删除rotate类，这将使动画开始或停止旋转。

完整的示例

下面是一个完整的示例，演示了如何使用HTML、CSS和JavaScript来实现通过点击切换旋转效果的动画：

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

.rotate {
  animation-play-state: running;
}
</style>
<script>
window.addEventListener('load', function() {
  var box = document.querySelector('.box');

  box.addEventListener('click', function() {
    box.classList.toggle('rotate');
  });
});
</script>
</head>
<body>

<div class="box"></div>

</body>
</html>

打开上述示例，当您点击红色方块时，它将开始或停止旋转。