FontAwesome动态旋转图标类（fa-spin&fa-pulse）

最新推荐文章于 2024-04-10 09:56:50 发布
最新推荐文章于 2024-04-10 09:56:50 发布
阅读量4.9k 收藏 2
点赞数 1
文章标签： FontAwesome 类 动态旋转图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SkeletonKing233/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
最低0.47元/天 解锁文章
SkeletonKing233
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FontAwesome静态旋转翻转图标类（fa-rotate&fa-flip）
SkeletonKing233的博客
08-20 2561
对于一个FontAwesome图标有时我们希望它能旋转个多少度或者翻转一下来显示，而不是直接显示上去，也因此FontAwesome提供了两个类——fa-rotate和fa-flip。
巧用字体图标实现加载效果
陈戏猿
05-24 298
在前端开发中，如果想要实现简单的爱的魔力转圈圈似的加载效果，可以试试一款叫做奥森图标的字体来实现。 官网：https://www.thinkcmf.com/font_awesome.html fa-spin类可以加旋转特效。 fa-nx类可以加放大特效，其中n可以是2，3，4，5. fa-pulse类可以实现8步旋转，效果上就是不那么丝滑了。 加载中示例： <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> 卡卡的旋转： <i
关于Font Awesome图标的使用 加入动态效果
Harryの心阁
11-10 1113
font awesome1.引入CSS2.修改HTML3.转载注意 1.引入CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css"> 2.修改HTML 加入font parent awesome 的class元素 <!--<a>标签也可以--> <div cla
动态图标新体验：Font Awesome Animation
最新发布
gitblog_00016的博客
04-10 417
动态图标新体验：Font Awesome Animation 项目地址:https://gitcode.com/l-lin/font-awesome-animation Font Awesome Animation 是一个基于 Font Awesome 图标库的扩展项目，它为静态的 FontAwesome 图标添加了动态效果，让网页元素更具活力和吸引力。通过简单的 CSS 类或 JavaScrip...
【odoo15】odoo中的fa-xxx小图标
ONLYSRY的博客
06-08 808
odoo中的小图标使用的就是这个： odoo中的可用图标库可以在如下的位置找到包含图标css文件： 使用的时候：直接在参考列表里找：Font Awesome，一套绝佳的图标字体库和CSS框架Font Awesome，一套绝佳的图标字体库和CSS框架https://fontawesome.dashgame.com/比如说我想用这个图标：【 quora】 使用时加上 fa- 即可：......
FontAwesome 字体图标库 使用
wuyujin1997的博客
05-19 1万+
Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 fa被设计为与内联元素一起使用。 <i>和<span>标签被广泛应用于图标。(推荐使用<i>，标签更简短，且语义更精确) 当使用fa的图标重叠时候，在<span>标签中嵌套两个<i>标签。 依赖 两种方法，直接引入CDN或引入本地依赖(略)。 CD...
Bootstrap3 Font Awesome 字体图标带动画的图标
歪脖先生的博客
06-05 1600
带动画的图标 Font Awesome不仅支持固定角度的旋转，还提供了带动画的旋转图标。可以使用.fa-spin类让任意图标动态持续旋转，还可以使用.fa-pulse类让图标以 8 步为周期进行旋转，它们尤其适合表示刷新、加载等功能的图标，如.fa-spinner、.fa-refresh和.fa-cog等： <divclass="fa-3x"> <iclass="fa ...
矢量字体图标Font-Awesome相关实例
04-03
8. **动画图标**：通过结合Font-Awesome的动画类，如`fa-spin`或`fa-pulse`，可以制作出旋转或脉冲效果的图标。 9. **自定义图标**：如果Font-Awesome内置的图标无法满足需求，可以创建自己的图标集。这需要使用SVG...
grav-plugin-markdown-fontawesome：用于使用语法显示Font Awesome图标的Grav插件
02-05
先决条件该插件的工作原理是查找以fas fa- fal fa- ， far fa- fal fa- ， fal fa- ， fad fa- fal fa-或fab fa- （或fa fa-对于Font Awesome 4）开头的冒号图标名称，并将其转换为标签。 可以在末尾添加其他类...
font-awesome-4.6.3资源包下载
06-27
7. **动画效果**：Font Awesome 4.6.3支持CSS3动画，如旋转、脉冲、抖动等，通过`.fa-spin`、`.fa-pulse`等类即可实现。 8. **兼容性**：这个版本的Font Awesome已经考虑了广泛的浏览器兼容性，包括Firefox, Chrome...
fa --图标字体库--
01-19
fa --图标字体库--
font-awesome-4.3.0学习
04-25
8. **动画**：利用CSS3动画，可以创建动态图标，例如旋转、脉冲等效果，通过`.fa-spin`类可以让图标持续旋转。 9. **可扩展性**：Font Awesome允许用户自定义和扩展图标库，如果你需要特定的图标，可以创建自己的...
SpinCalc.zip_SPIN matlab_SpinCalc_matlab-spin
07-15
spin calculator useful for students
fa-spinner旋转小圈圈-Font Awesome字体
luxiaopengyou的博客
06-04 291
http://www.fontawesome.com.cn/get-started/ <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="styleshe
ico图标及其主要应用
YPLee_8的博客
09-11 1415
ico百科       Favicon原本是windows中存储单个图案的一种图标文件格式，现可以用作软件、文件夹以及网站等的缩略标志，显示在用户的资源管理器，浏览器的地址栏、标题栏和多页面浏览器的标签栏上。图标文件一般尺寸较小，常见的是16*16,32*32和48*48。（IE下要使用16*16才能正常显示）图标是部分透明的，可以直接打开浏览。       favicon.ico图标是网
react项目字体图标，fontawesome配置
weixin_62902737的博客
03-29 232
官网：https://fontawesome.com/docs/web/use-with/react/
Fontawesome字体使用说明及其常用效果语法
热门推荐
shuai_wy的专栏
07-10 2万+
本文主要介绍Fontawesome图标的使用说明及其常用效果语法，在本文中会介绍 图标的旋转，图标的堆叠，图标的规格，图标的方向等常用语法。
Bootstrap3 Font Awesome 字体图标旋转或翻转图标
歪脖先生的博客
06-05 3595
旋转或翻转图标 Font Awesome提供了一组样式类，可以对图标进行固定角度的旋转或翻转。这些类分别是 .fa-rotate-90（顺时针旋转90度）、.fa-rotate-180（顺时针旋转180度）、.fa-rotate-270（顺时针旋转270度）、.fa-flip-horizontal（水平翻转）、.fa-flip-horizontal（垂直翻转）。如： <divclass...
a-spin显示关闭按钮
07-28
要在a-spin组件中显示关闭按钮，您可以按照以下步骤进行操作： 1. 首先，您需要使用a-spin组件的`indicator`插槽来自定义加载指示器的内容。在该插槽中，您可以添加一个关闭按钮。 2. 在 a-spin 组件的模板中，找到 `<div class="ant-spin-container">` 元素，这是用于包裹加载指示器的容器。 3. 在该容器内部，添加一个关闭按钮的 HTML 代码，例如 `<button @click="closeSpinner">关闭</button>`。请注意，这只是一个示例按钮，您可以根据需要进行自定义。 4. 确保您在 a-spin 组件的 JavaScript 部分定义了 `closeSpinner` 方法。您可以在该方法中执行关闭操作，例如通过更改状态来隐藏加载指示器。 下面是一个示例代码片段，展示了如何在 a-spin 组件中添加关闭按钮： ```vue <template> <a-spin> <template #indicator> <div class="ant-spin-container"> <!-- 添加关闭按钮 --> <button @click="closeSpinner">关闭</button> </div> </template> <!-- 其他内容 --> </a-spin> </template> <script> export default { methods: { closeSpinner() { // 执行关闭操作 // 可以通过更改状态来隐藏加载指示器 } } } </script> ``` 请根据您的具体需求进行适当的调整和修改。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值