在悬停时旋转字体真棒图标
Rotating a font awesome icon on hover
我正在尝试在悬停时旋转字体真棒刷新图标。
这是普通版:
<i class="fa fa-refresh"></i>
这是旋转版本:
<i class="fa fa-refresh fa-spin"></i>
我只想在悬停时旋转图标。
这是失败的:fiddle
.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>
您需要定义 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>
当不是悬停时,您可以简单地禁用动画。
.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's Developer Handbook.
阅读更多内容
在这种情况下,您希望起始关键帧位于 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>
使用以下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>
我正在尝试在悬停时旋转字体真棒刷新图标。
这是普通版:
<i class="fa fa-refresh"></i>
这是旋转版本:
<i class="fa fa-refresh fa-spin"></i>
我只想在悬停时旋转图标。
这是失败的:fiddle
.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>
您需要定义 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>
当不是悬停时,您可以简单地禁用动画。
.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's Developer Handbook.
阅读更多内容在这种情况下,您希望起始关键帧位于 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>
使用以下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>