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