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>
    
     
     
  • 相关阅读:
    OSPF 开放最短路径优先协议
    RIP 路由算法
    原创 记一个上门洗车服务范围的需求实现
    转载 一位资深程序员大牛给予Java学习者的学习路线建议
    原创 解决异步调用实时跳转
    FIFO队列 ADT接口 数组实现
    FIFO队列 ADT接口 链表实现
    约瑟夫问题 链表实现
    合并-查找接口实现
    快速查找 快速合并 加权快速合并 路径等分加权快速合并 算法
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12605617.html
Copyright © 2011-2022 走看看