9.1.6　360度旋转

Font Awesome不仅提供了固定角度的旋转功能，还提供了360度持续旋转的功能，开发刷新、加载功能的时候特别有用，用的时候只需要在所应用图标样式上再加一个icon-spin样式即可。示例如下：

  1. <i class="icon-spinner icon-spin"></i> 360度持续旋转，loading内容<br />
  2. <i class="icon-refresh icon-spin"></i> 360度持续旋转，刷新内容<br />
  3. <i class="icon-twitter icon-spin"></i> twitter小鸟也能360度持续旋转<br />

上述示例的运行效果如图9-6所示。

9.1.6　360度旋转 - 图1 图9-6　持续旋转效果

再配合.icon-large样式，就可以放大显示了，这比Bootstrap自带的icon功能集强大多了。spin样式的源码如下：

  1. // 源码269行
  2. /* Animated rotating icon 主要源码 */
  3. .icon-spin {
  4.     display: inline-block;
  5.     -moz-animation: spin 2s infinite linear;
  6.     -o-animation: spin 2s infinite linear;
  7.     -webkit-animation: spin 2s infinite linear;
  8.     animation: spin 2s infinite linear;
  9. }
  10. @-moz-keyframes spin {
  11.     0% {    -moz-transform: rotate(0deg);  }
  12.     100% {    -moz-transform: rotate(359deg);  }
  13. }
  14. /* 针对特殊浏览器的设定省略，请查阅相应源码 */

注意

由于使用了CSS3的spin特性，所以该旋转功能不支持IE9及以下版本。