Bootstrap3 Font Awesome 字体图标带动画的图标

带动画的图标

Font Awesome不仅支持固定角度的旋转,还提供了带动画的旋转图标。可以使用.fa-spin类让任意图标动态持续旋转,还可以使用.fa-pulse类让图标以 8 步为周期进行旋转,它们尤其适合表示刷新、加载等功能的图标,如.fa-spinner.fa-refresh.fa-cog等:

  1. <div class="fa-3x">
  2. <i class="fa fa-spinner fa-spin"></i>
  3. <i class="fa fa-circle-o-notch fa-spin"></i>
  4. <i class="fa fa-refresh fa-spin"></i>
  5. <i class="fa fa-cog fa-spin"></i>
  6. <i class="fa fa-twitter fa-spin"></i>
  7. <i class="fa fa-spinner fa-pulse"></i>
  8. </div>

效果如图 5‑7所示:

带动画的图标

图5-7 带动画的图标

需要注意的是,转动的图标是通过CSS3动画实现的,IE9及以下版本的浏览器不支持CSS3的特性,因此看不到动画效果。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页

打赏

ixygj197875

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者