我试图在悬停时旋转字体真棒刷新图标.
这是正常版本:
这是旋转版本:
我只想在悬停时旋转图标.
这是失败的:小提琴
.fa-spin-hover:hover {
-webkit-animation: spin 2s;
-moz-animation: spin 2s;
-o-animation: spin 2s;
animation: spin 2s;
}
使用以下CSS.希望这会帮助你.
.fa.fa-refresh:hover {
transform: rotate(180deg);
}
.fa.fa-refresh {
transition: transform 0.5s ease 0s;
}
您需要定义fa-spin关键帧。
CSS：
.fa-spin-hover:hover {
animation: fa-spin 2s infinite linear;
}
// The animation bellow is taken from font-awesome.css
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transfo rm:rotate(359deg);transform:rotate(359deg)}}
的HTML
演示：http：//jsfiddle.net/uevfyghr/1/
京公网安备 11010802040832号 | 京ICP备19059560号-6 