在字体很棒我如何使用此代码:<i class="fa fa-spinner fa-spin"></i>
仅适用于鼠标?
答案 0 :(得分:21)
您也可以只创建另一个仅用于悬停的类,而不是覆盖该类:
.fa-spin-hover:hover {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
<i class="fa fa-circle-o-notch fa-spin-hover"></i>
<i class="fa fa-spinner fa-spin-hover"></i>
小提琴:http://jsfiddle.net/Xw7LH/1/
注意:如果使用Font-Awesome 4.2+,您可能需要使用&#34; fa - &#34;命名动画:
.fa-spin-hover:hover {
-webkit-animation: fa-spin 2s infinite linear;
-moz-animation: fa-spin 2s infinite linear;
-o-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
答案 1 :(得分:3)
你也可以在jquery库中使用javascript:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
}, function() {
$(this).removeClass('fa-spin');
});
这会让它只在悬停时旋转并在其结束时重置回其原始位置 - 据说它可能看起来很奇怪有些图标(我只用它与cog一起使用)。对于悬停时的无限旋转,您可以这样做:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
});
jquery链接:https://jquery.com/
答案 2 :(得分:0)
所以让它在我的网站上工作css我改变了这个
.fa-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
用这个
.fa-spin:hover {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
答案 3 :(得分:0)
只使用font awesome ccs文件 更多细节 http://l-lin.github.io/font-awesome-animation/
他们有关于如何使用ccs的详细文档
答案 4 :(得分:0)
在字体5中,我偶然发现它是由它实现的新svg库完成的 我这样做:
.fa-spin-hover:hover svg {
-webkit-animation: fa-spin 2s infinite linear;
-moz-animation: fa-spin 2s infinite linear;
-o-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;}
然后将其分配给上级元素并准备就绪