首页 > 编程知识 正文

css标旋转

时间:2023-05-03 18:22:02 阅读:241892 作者:1637

不管是我们在网上打游戏,还是上网学习的时候,网页在加载时往往都会出现一个不停在转着圈的加载图标,可是这种图标是怎么实现的呢?其中一种方法就是用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" rel="external nofollow" 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>

God Bless You For Ever!

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。

  •  标签:  
  • css