乐趣区

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

Portfolio caption

今天有个需求,需要将一个 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>

具体效果为:






退出移动版