zoukankan      html  css  js  c++  java
  • FontAwesome动态旋转图标类(fa-spin&fa-pulse)

    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博客
    https://blog.csdn.net/SkeletonKing233/java/article/details/99731513

    不管是我们在网上打游戏,还是上网学习的时候,网页在加载时往往都会出现一个不停在转着圈的加载图标,可是这种图标是怎么实现的呢?其中一种方法就是用FontAwesome图标提供的两个很不错的类——fa-spin和fa-pulse。

    fa-spin类

    <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" href="https://cdnjs.cloudflare.com/ajax/libs/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>
    
     
     
  • 相关阅读:
    众包中使用变分推断和信念传播的几篇文章
    众包中的概率图模型和 EM 算法的使用和总结
    矩阵求导
    CCDM2018会议见闻
    关于 PCA 算法的一点小结
    Nginx--安装
    Nginx--简介
    linux--系统启动过程
    linux--目录结构
    Linux 远程连接工具Xshell6
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12605617.html
Copyright © 2011-2022 走看看