font-awesome或iconfont等其他字体实现旋转动画

97次阅读

共计 407 个字符，预计需要花费 2 分钟才能阅读完成。

今天有个需求，需要将一个 restart 的字体设置成一直滚动的动画效果。发现 font-awesome 已经实现了简单的旋转动画，所以和大家分享下。

1. 项目需要引入 font-awesome.css 或 font-awsesome.min.css

2. 需要将字体 display 样式设置为 inline-block，否则无动画效果

以下为 demo:

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

具体效果为：

正文完