css点击旋转并停止

CSS点击旋转并停止

代码如下：
HTML部分
<div class="box">
  <p>点击我，我会旋转停止</p>
</div>
CSS部分
.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
}
.box.rotate {
  transform: rotate(360deg);
  transition: transform 1s ease-in-out;
}
JavaScript部分
var box = document.querySelector('.box');
box.addEventListener('click', function() {
  box.classList.toggle('rotate');
}
);
 

以上就是实现CSS点击旋转并停止的全部代码，希望对大家有所帮助！