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>
    
     
     
  • 相关阅读:
    第一次迭代心得
    RDF搜索引擎——需求分析心得
    RDF搜索引擎——数据库设计心得
    RDF搜索引擎——数据库具体设计
    服务器上修改运行scala
    结对编程项目的收获与总结(支持UI背景与背景音乐的刷题器)
    取长补短——结对编程项目之队友代码分析
    团队项目——测试心得
    第一次迭代开发心得
    团队项目——需求心得
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12605617.html
Copyright © 2011-2022 走看看