css3怎样设置元素360度循环旋转时点击停止

如何设置元素360度循环旋转

旋转是CSS3中一种比较常见的动画效果，可以用来实现比较炫酷的效果，而设置元素360度循环旋转就是其中一种应用。下面就让我们来看看如何实现。

使用CSS3的transform属性实现旋转

CSS3中提供了transform属性，可以对元素进行旋转、缩放、倾斜、移动等操作。其中，旋转操作涉及到旋转角度和旋转中心点。

旋转角度可以使用数值或指定单位的角度值，例如deg度数、rad弧度、grad梯度。当旋转角度为正值时，元素顺时针旋转；当旋转角度为负值时，元素逆时针旋转。

旋转中心点可以使用关键字指定，例如center元素中心点、top顶部中心点、bottom底部中心点、left左边中心点、right右边中心点；也可以使用数值或指定单位的百分比值来指定中心点位置。

下面的代码实现了对一个div元素逆时针旋转360度的效果：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

上面的代码中，使用了keyframes关键字创建了一个名为rotate的动画，从0度旋转到-360度（逆时针旋转），动画时间为2秒，重复次数为无限次。

如何点击停止元素的旋转

在部分场景下，如果元素一直旋转，会导致用户体验不佳。我们可以通过添加hover效果或点击事件来控制元素的旋转。

使用:hover效果控制旋转

可以通过添加:hover伪类来控制元素的停止，当鼠标移动到元素上时，动画停止；移开时，动画继续。

下面的代码实现了当鼠标移动到一个div元素上时，停止旋转的效果：

div:hover {
  animation-play-state: paused;
}

上面的代码中，使用了animation-play-state属性将动画的播放状态设置为paused，当鼠标移动到元素上时，动画停止；移开时，动画继续。

使用JavaScript点击事件控制旋转

除了使用CSS的:hover效果，我们也可以使用JavaScript的点击事件来控制元素的停止。具体实现过程如下：

首先，需要添加一个按钮的HTML代码用于控制旋转的停止和播放：

  <button id="btn">点击停止</button>
  

然后，需要在CSS中添加animation-play-state属性，将动画的播放状态设置为paused：

  div {
    animation-name: rotate;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
  }
  .paused {
    animation-play-state: paused;
  }
  

最后，在JavaScript中添加点击事件并切换CSS类，控制动画的停止和播放：

  var btn = document.getElementById("btn");
  var div = document.getElementsByTagName("div")[0];
  
  btn.addEventListener("click", function() {
    if (div.classList.contains("paused")) {
      div.classList.remove("paused");
      btn.innerText = "点击停止";
    } else {
      div.classList.add("paused");
      btn.innerText = "点击播放";
    }
  });
  

总结

以上就是设置元素360度循环旋转并且控制旋转停止的方法。通过使用CSS3的transform属性，可以实现元素的旋转动画；通过添加:hover效果或JavaScript的点击事件，可以控制动画的停止。