FontAwesome动态旋转图标类(fa-spin&fa-pulse)

※ 声明:本站为非商业性博客,内容均为本站网友收集于互联网公开分享,仅限于学习和探讨的目的,不得将上述内容用于非法或商业途径,版权争议与本站无关,如有冒犯,请留言删除!

一、总结  

     fa-spin类:将"fa-spinner"这个图标旋转起来,形成一个连续流畅的旋转动画效果。 

     fa-pulse类:将"fa-spinner"这个图标以八步为周期旋转起来,形成一个不太流畅的旋转动画效果。 

二、FontAwesome动态旋转图标类(fa-spin&fa-pulse)   

    转自或参考:FontAwesome动态旋转图标类(fa-spin&fa-pulse)_网络_SkeletonKing233的博客-CSDN博客   不管是我们在网上打游戏,还是上网学习的时候,网页在加载时往往都会出现一个不停在转着圈的加载图标,可是这种图标是怎么实现的呢?其中一种方法就是用FontAwesome图标提供的两个很不错的类——fa-spin和fa-pulse。

<i class="fa fa-spinner fa-spin"></i>

功能:将"fa-spinner"这个图标旋转起来,形成一个连续流畅的旋转动画效果。


fa-pulse类

<i class="fa fa-spinner fa-pulse"></i>

功能:将"fa-spinner"这个图标以八步为周期旋转起来,形成一个不太流畅的旋转动画效果。


运行实例

备注:fa-spin与fa-pulse的最大差别就在于fa-spin是让图表非常流畅的在旋转,而fa-pulse是以8步为一个周期在旋转,既每转45度停一小下,显得不那么流畅。


以下为代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>FontAwesome动态旋转图标</title>
	<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>

<body>
	<p>这是四个用fa-spin类实现的旋转流畅的加载图标</p>
	<i class="fa fa-spinner fa-spin"></i>
	<i class="fa fa-circle-o-notch fa-spin"></i>
	<i class="fa fa-refresh fa-spin"></i>
	<i class="fa fa-cog fa-spin"></i>
	<p>这是四个用fa-pulse类实现的旋转不太流畅的加载图标</p>
	<i class="fa fa-spinner fa-pulse"></i>
	<i class="fa fa-circle-o-notch fa-pulse"></i>
	<i class="fa fa-refresh fa-pulse"></i>
	<i class="fa fa-cog fa-pulse"></i>
</body>

</html>


※ 感谢您的支持,如果喜欢本内容,请打赏本站!谢谢!
打赏 支付宝打赏 微信打赏

评论回复

- 大 河 之 星 -

2012-12-12 周一 88:88:88 鹦鹉台上线运行时间统计

网站声明:所有节目源均来源自互联网,本站不存储、不制作任何视频内容。

如本站内容侵犯到您的权益,请说明具体情况,本站会第一时间处理。

您是本站第16名访客 今日有0篇新文章
- 大 河 之 星 -

2012-12-12 周一 88:88:88 鹦鹉台上线运行时间统计

网站声明:所有节目源均来源自互联网,本站不存储、不制作任何视频内容。

如本站内容侵犯到您的权益,请说明具体情况,本站会第一时间处理。

您是本站第17名访客 今日有0篇新文章