23
2020
03

Bootstrap3 带动画的图标

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

<div class="fa-3x">
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-twitter fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
</div>

效果如图 5‑7所示:fa-spin.png需要注意的是,转动的图标是通过CSS3动画实现的,IE9及以下版本的浏览器不支持CSS3的特性,因此看不到动画效果。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。