悬停时旋转一个字体很棒的图标

Rotating a font awesome icon on hover

本文关键字：字体 图标 一个 旋转 悬停      更新时间：2023-09-26

我正试图在悬停时旋转字体令人敬畏的刷新图标。

这是正常版本：
<i class="fa fa-refresh"></i>

这是旋转版本：
<i class="fa fa-refresh fa-spin"></i>

我只想在悬停时旋转图标。

这是失败的：小提琴

.fa-spin-hover:hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

使用以下CSS。希望这对你有帮助。

.fa.fa-refresh:hover {  
     transform: rotate(180deg);
}
.fa.fa-refresh {
     transition: transform 0.5s ease 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

更新Fiddle：http://jsfiddle.net/azim101/Xw7LH/177/

更新：

希望这能满足你的需要。

.fa.fa-refresh:hover {  
    -webkit-animation: infinite-spinning 1s ease-out 0s infinite normal;
    animation: infinite-spinning 1s ease-out 0s infinite normal;
}
@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

您需要定义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

 <i class="fa fa-refresh fa-2x fa-spin-hover"></i>

演示：http://jsfiddle.net/uevfyghr/1/

当不是悬停时，您可以简单地禁用动画。

.fa-spin-hover:not(:hover) {
   animation: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin fa-spin-hover"></i>

为了使用CSS3的动画，您需要定义与动画的开始和结束位置（旋转）相对应的动画关键帧。您可以在Mozilla的开发者手册中阅读更多内容。

在这种情况下，您希望起始关键帧处于0度（在CSS中为0deg，或者更一般地，在ndeg，其中n是以度为单位的旋转），而结束关键帧处于您想要的任意度数（例如，360deg表示顺时针旋转1圈，720deg表示顺时针转2圈，等等）

在代码中，这转化为

.fa-spin-hover:hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

相关文章：