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

老白 1个月前 57浏览 0评论
本文目录

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

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

给网页图标字体 Font Awesome 添加动画效果 CSS学习 第1张

演示

给网页图标字体 Font Awesome 添加动画效果 CSS学习 第2张

在线演示&下载地址: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>


发表评论