如何通过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>

我正在使用icomoon显示图标。 我想要实现的是，每当某人点击这个时，我希望它像加载程序一样旋转，以便我们可以显示正在处理某些内容。 我尝试了许多css3过渡效果。 所有这些转换仅应用于

标签而不是标签。

- Akshay Shrivastav

Answer 1

使用简单的CSS keyframes，您可以轻松实现此目标。我创建了一个名为icn-spinner的类，假设它将包含图标。这个类有一个名为icn-spinner的动画，会旋转2次。如果您想让它无限循环，请将2替换为关键字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>

- Kalpesh Singh

---

如何创建一个无限循环？ - Akshay Shrivastav

animation: spin-animation 1s infinity; - Kalpesh Singh

这正是我想要的，非常完美。我只想让它进入一个无限循环，如何实现？ - Akshay Shrivastav

已更新答案。如果您想要动画效果，请添加类icn-spinner，如果要移除动画效果，只需将其删除即可。希望能解决问题。 - Kalpesh Singh

太棒了，伙计！干杯！ - Kalpesh Singh

Answer 2

你可以使用javascript/jquery与CSS来实现此操作。需要使用Javascript/Jquery来切换具有图标的'i'元素的类。下面是完整的解决方案。

这是你提供的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>

在具有“js-spin”类的元素上单击时，添加类“icn-spinner”的Jquery代码。为此，您需要在项目中导入jquery。

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

以下是CSS样式的代码。 如果没有“animation-timing-function”，旋转器将会转动，但不是线性的。 动画从0度开始，到360度结束。

i {
    font-size: 40px;
}

.icn-spinner {
    animation: spin-animation 1s infinite;
    animation-timing-function: linear;
    display: inline-block;
}

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

    100% {
        transform: rotate(360deg);
    }
}

- Shubham