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

在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多。
向大家介绍一个可以上Font Awesome动起来的CSS文件,现在交互越来越重视,给图标加上对应的动画可以增加一些用户体验,是很不错的。
Font Awesome 添加动画效果
演示效果&下载地址:
http://l-lin.github.io/font-awesome-animation/

从演示文件中可以看出目前有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>

Font Awesome

中文:http://www.bootcss.com/p/font-awesome/
英文:http://fortawesome.github.io/Font-Awesome/

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/161.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部