给网页图标添加动画效果 网页字体Font Awesome动态效果
浏览数：190 /
时间：2015年06月09日
转设计达人的一篇《给网页图标字体 Font Awesome 添加动画效果》，感觉很不错，看看下面的截图演示吧。
底部有演示地址，可以看看下真正的效果…… 也有Font-Awesome的下载地址。
当然了，可以设置为正常状态下也可以动态显示，也可以设置鼠标触发时发生动画效果。
教程很简单…… 支持Font Awesome内所有的字体都是动态效果的……
引入CSS样式表
<link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css">
给图标添加动画样式，动画样式请看演示页，这里我使用了faa-spin，这时动画还不可以动的。
<i class="fa fa-spinner faa-spin"></i>
触法动画1，添加一个animated的Class，这时图标可动起来了，无限循环。
<i class="fa fa-spinner faa-spin animated"></i>
触法动画2，通过鼠标经过后才有动画效果，鼠标移开就会立即停止。
和上面一样，也是添加一个animated-hover的Class即可。
<i class="fa fa-spinner faa-spin animated-hover"></i>
这就是全部的教程，看起来很简单，喜欢的朋友可以试试下吧，现在交互越来越重视，给图标加上对应的动画可以增加一些用户体验，是很不错的。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
