我们可以修改 Font Awesome 旋转速度吗?
Can we modify a Font Awesome spin speed?
我的网站上有一个旋转齿轮,显示了以下代码:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x fa-spin"></i>
个人认为齿轮的速度太快了。我可以用 CSS 修改它吗?
简答
是的,你可以。使用您自己的动画规则将图标上的 .fa-spin
class 替换为新的 class:
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x slow-spin"></i>
更长的答案
如果您查看 Font Awesome CSS file
,您会看到旋转动画的规则:
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.fa-spin
class 的规则是指 fa-spin
个关键帧:
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
您可以在不同的 class 中使用相同的关键帧。例如,您可以为名为 .slow-spin
的 class 编写以下规则:
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
现在您可以按照您选择的速度旋转 HTML 个元素。不是将 class .fa-spin
应用于元素,而是应用 .slow-spin
class:
<i class = "fa fa-cog fa-5x slow-spin"></i>
类似于 Michael Laszlo 的回答。这就是我用来使 fa-refresh 更快的方法,因为默认情况下 fa-spin 非常慢。
.fa-spin {
-webkit-animation: fa-spin 0.75s infinite linear !important;
animation: fa-spin 0.75s infinite linear !important;
}
我使用 !important 来控制特异性:)
不必使用自己的动画或 class 定义。任何css动画的速度都可以通过animation-durationcss属性来控制。只需使用:
.fa-spin {
animation-duration: 3s; // or something else
}
值越大动画速度越慢
我的网站上有一个旋转齿轮,显示了以下代码:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x fa-spin"></i>
个人认为齿轮的速度太快了。我可以用 CSS 修改它吗?
简答
是的,你可以。使用您自己的动画规则将图标上的 .fa-spin
class 替换为新的 class:
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x slow-spin"></i>
更长的答案
如果您查看 Font Awesome CSS file
,您会看到旋转动画的规则:
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.fa-spin
class 的规则是指 fa-spin
个关键帧:
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
您可以在不同的 class 中使用相同的关键帧。例如,您可以为名为 .slow-spin
的 class 编写以下规则:
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
现在您可以按照您选择的速度旋转 HTML 个元素。不是将 class .fa-spin
应用于元素,而是应用 .slow-spin
class:
<i class = "fa fa-cog fa-5x slow-spin"></i>
类似于 Michael Laszlo 的回答。这就是我用来使 fa-refresh 更快的方法,因为默认情况下 fa-spin 非常慢。
.fa-spin {
-webkit-animation: fa-spin 0.75s infinite linear !important;
animation: fa-spin 0.75s infinite linear !important;
}
我使用 !important 来控制特异性:)
不必使用自己的动画或 class 定义。任何css动画的速度都可以通过animation-durationcss属性来控制。只需使用:
.fa-spin {
animation-duration: 3s; // or something else
}
值越大动画速度越慢