如何通过css3在html5中使带有i标签的图标旋转

Question

这是我的HTML代码

<div class='form-group col-xs-12 col-sm-5 col-md-5'>
    <label for='captcha-code'>Captcha Code: </label>
    <span id='captcha-text'></span>
    <i class='captcha-refresh icon-spinner9 pointer'></i>
</div>

我正在使用icomoons来显示图标。我要实现的目标是，每当有人单击<i class='captcha-refresh icon-spinner9 pointer'></i>它时，我都希望它像装载机一样旋转，以便我们可以证明某些东西正在处理，而我尝试了许多css3转换。所有这些过渡都仅应用于div标签，而不应用于i标签。

请，有人可以提供解决方案吗？提前致谢。

Answer 1

使用可以使用简单的CSS轻松实现这一目标keyframes。我创建了一个名为的类icn-spinner，假设它将包含图标。此类具有称为的动画icn-spinner，并将旋转2次。如果需要，可以使其无限。只需替换2为keyword即可infinite。

$(document).ready(function() {
  $('.js-spin').click(function() {
    $(this).addClass('icn-spinner') //remove class to stop animation
  });
});

i {
  font-size: 40px;
}

.icn-spinner {
  animation: spin-animation 0.5s infinite;
  display: inline-block;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="js-spin"> ? Click </i>