我的网站上显示了一个旋转齿轮,代码如下：
<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类：
.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类的规则是指自旋关键帧：
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
您可以在不同的类中使用相同的关键帧.例如,您可以为名为.slow-spin的类编写以下规则：
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
现在,您可以以您选择的速度旋转HTML元素.而不是将类.fa-spin应用于元素,应用.slow-spin类：
<i class = "fa fa-cog fa-5x slow-spin"></i>