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

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 1:05:23 共计：3593 浏览

在国外网站中使用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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。