Bootstrap3 Font Awesome 字体图标带动画的图标

带动画的图标

Font Awesome不仅支持固定角度的旋转，还提供了带动画的旋转图标。可以使用.fa-spin类让任意图标动态持续旋转，还可以使用.fa-pulse类让图标以 8 步为周期进行旋转，它们尤其适合表示刷新、加载等功能的图标，如.fa-spinner、.fa-refresh和.fa-cog等：

<div class="fa-3x">






</div>

效果如图 5‑7所示：

图5-7 带动画的图标

需要注意的是，转动的图标是通过CSS3动画实现的，IE9及以下版本的浏览器不支持CSS3的特性，因此看不到动画效果。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 Font Awesome 字体图标带动画的图标相关推荐

Bootstrap3 Font Awesome 字体图标带边框的图标
带边框的图标使用.fa-border类,可以类轻易构造出带有圆角边框的图标.还可以添加.pull-right或.pull-left类,让图标向右或向左浮动,所有图标都支持这两个类.如: <di ...
Bootstrap3 Font Awesome 字体图标的堆叠
堆叠的图标 Font Awesome还支持将多个图标叠加在一起组成一个复合图标.如果想要将多个图标堆叠起来,需要给容器元素添加.fa-stack类,为图标元素使用.fa-stack-1x作为正常比例的 ...
Bootstrap3 Font Awesome 字体图标旋转或翻转图标
旋转或翻转图标 Font Awesome提供了一组样式类,可以对图标进行固定角度的旋转或翻转.这些类分别是 .fa-rotate-90(顺时针旋转90度)..fa-rotate-180(顺时针旋转18 ...
Bootstrap3 Font Awesome 字体图标
简介 Font Awesome 是一套绝佳的图标字体库,它提供可缩放的矢量图标,并且可以通过CSS来设置大小.颜色.阴影或者其它任何支持的效果.Font Awesome具有以下特性: 一个字库,675 ...
Bootstrap3 Font Awesome 字体图标的基本图标
基本图标 Font Awesome图标跟Glyphicon图标的用法完全相同,所有图标都需要一个基类 .fa 和对应每个图标的 .fa-* 类.只需创建一个行内元素,并为它应用图标类,即可使用Font ...
Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
Font Awesome一套绝佳的图标字体库和CSS框架的使用
场景 Font Awesome 一套绝佳的图标字体库和CSS框架官网: http://fontawesome.dashgame.com/ 实现从官网下载资源文件,解压后的目录将上面解压后的四个目 ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
html点赞代码java_17种 HTML5字体图标点赞动画特效源码
今天给大家展示分享的是 17种 HTML5字体图标点赞动画特效源码! 这里就不一一给大家上图了,大家自己去体验一下代码过长需要文档版源码来我的前端群581549454,已上传到群文件废话不多说上源 ...

Bootstrap3 Font Awesome 字体图标带动画的图标

带动画的图标

Bootstrap3 Font Awesome 字体图标带动画的图标相关推荐

最新文章

热门文章