受到Fontawesome的启发,我正试图用bootstrap3创建一个旋转图标。它很容易通过CSS3过渡和转换实现。问题是图标不会围绕中心旋转。它在旋转时摆动。
下面粘贴的代码。有人知道导致问题的原因吗?
.spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-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="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h1 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
</h1>
答案 0 :(得分:63)
问题是您要旋转一个不在您的范围内居中的元素。
如果您想要真正的解决方案,请在transform-origin
上添加.spin
以更改轮播中心
.spin{
-webkit-transform-origin: 50% 58%;
transform-origin:50% 58%;
-ms-transform-origin:50% 58%; /* IE 9 */
-webkit-animation: spin .2s infinite linear;
-moz-animation: spin .2s infinite linear;
-o-animation: spin .2s infinite linear;
animation: spin .2s infinite linear;
}
答案 1 :(得分:57)
我写了一篇blog帖子。只需使用自定义类引用glyphicon:
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
glyphicon-spin
类是通过研究FontAwesome样式表中的fa-spin
类构建的:
h4 {
font-size:18px;
font-weight:bold;
}
.fa-spin-custom, .glyphicon-spin {
-webkit-animation: spin 1000ms infinite linear;
animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
&#13;
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4>FontAwesome</h4>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-refresh fa-spin-custom"></i>
<br />
<br />
<h4>Glyphicons</h4>
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
&#13;
答案 2 :(得分:2)
如果遵循这个例子,还有一点。
关键帧定义需要考虑以下情况:某些属性将以非供应商为前缀而其他属性不会被取消。例如,在Chrome 35中,当前关键帧定义不起作用,因为关键帧不是供应商前缀,但转换仍然是。
这样的事情应该允许所有当前/未来的案例:
@-moz-keyframes spin
{
from
{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to
{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin
{
from
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin
{
from
{
-wekbit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
答案 3 :(得分:2)
Font Awesome有一个很方便的方法来获取图标:
答案 4 :(得分:0)
希望这对使用超棒字体的人有所帮助。
只需尝试一下。
<span class="sync-state pull-right" style="display: none;">
<i class="fa fa-refresh fa-spin"></i> synching..
</span>
然后在您的javascript上按类onclick或hover上最适合您的方式获取元素。
$(".sync-state").fadeIn();
事件发生后,您可以
$(".sync-state").fadeOut();
希望此帮助。 jQuery和超赞字体
答案 5 :(得分:0)
以上方法都不适合我,但这是
.spin {
animation: spin infinite 4s linear;
height: 80px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
答案 6 :(得分:-1)
Bootstrap为您提供了一个定义的类库。
使用“icon-spin”类和您的图标类
例如: - <i class="icon-refresh icon-spin"></i
&gt;