我在http://jsfiddle.net/4LPSD/中有以下代码
它可以在Chrome(版本35.0.1916.153)中使用,但不能在Firefox(版本30.0)中使用。
/******** HTM **********************/
<div class="container">
<h3>Animated button</h3>
<button class="btn btn-lg btn-warning"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</button>
</div>
/******* CSS **********************/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
有人知道怎么了吗?
我正在尝试旋转图片图标。
您需要包括Mozilla前缀,并在前面删除连字符animation
:
.glyphicon-refresh-animate {
animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
-moz-animation: spin2 .7s infinite linear;
}
@-moz-keyframes spin2 {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句