html – 我们可以修改一个Font Awesome旋转速度吗？

概述我的网站上显示了一个旋转齿轮,代码如下： <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修改 我的网站上显示了一个旋转齿轮,代码如下：

<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>

总结

以上是内存溢出为你收集整理的html – 我们可以修改一个Font Awesome旋转速度吗？全部内容，希望文章能够帮你解决html – 我们可以修改一个Font Awesome旋转速度吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。