• 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>
    
     
     
  • 相关阅读:
    cUBtYhaFzo
    「UVA1185」Big Number 解题报告
    「洛谷P3202」[HNOI2010]弹飞绵羊 解题报告
    「洛谷P2906」[USACO08OPEN]牛的街区Cow Neighborhoods 解题报告
    「洛谷P1306」斐波那契公约数 解题报告
    「SP25784」BUBBLESORT
    「UVA12004」 Bubble Sort 解题报告
    「洛谷P2397」 yyy loves Maths VI (mode) 解题报告
    「学习笔记」珂朵莉树 ODT
    log4j
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12605617.html
Copyright © 2020-2023  润新知