当前位置：首页 > 建站技巧 > FontAwesome动态旋转图标类（fa-spin&fa-pulse）

FontAwesome动态旋转图标类（fa-spin&fa-pulse）

admin2年前 (2022-10-26)建站技巧1000

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

一、总结

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>