给网页图标字体 Font Awesome 添加动画效果

Sponsor

在国外网站中使用Web字体已经流行起来，虽然使用中文不太靠谱，但我们可以使用图标字体，也是很是方便的，图标字体有很多，可看《30个免费网页图标字体以及使用方法》一文，其中Font Awesome有较多用户使用。

今天我们主要向大家介绍一个可以上Font Awesome动起来的CSS文件，现在交互越来越重视，给图标加上对应的动画可以增加一些用户体验，是很不错的。

演示

在线演示&下载地址：DEMO

从演示文件中可以看出目前有10种CSS动画效果，任何Font Awesome图标都可以使用这些动画样式，而不仅是DEMO中的哪几个图标，下面一起看看教程。

使用教程：

由于是使用CSS3实现的动画，所以只兼容IE10+,Safari,Firefox等主流浏览器。

Step1: 引入对应CSS文件
首页要添加Font Awesome的CSS样式文件。

<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="font-awesome-animation.min.css">

Step2: 给图标添加动画样式，动画样式请看演示页，这里我使用了faa-spin，这时动画还不可以动的。

<i class="fa fa-spinner faa-spin"></i>

Step3: 触法动画1，添加一个animated的Class，这时图标可动起来了，无限循环。

<i class="fa fa-spinner faa-spin animated"></i>

Step4: 触法动画2，通过鼠标经过后才有动画效果，鼠标移开就会立即停止。
和上面一样，也是添加一个animated-hover的Class即可。

<i class="fa fa-spinner faa-spin animated-hover"></i>

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。