javascript - 无休止地旋转图像/div（跨浏览器）

Question

我正在尝试为这种效果找到一个跨浏览器的解决方案，但这是我能找到的最好的：

http://jsfiddle.net/fE58b/19/

它对 CPU 也非常友好。

一些非跨浏览器 javascript 解决方案使用几乎 50% 的 CPU。在我看来，这不是网络使用的解决方案。

提供的示例适用于 Chrome 17、Firefox 11 和 Safari 5.1.7。

所以我的问题是：有没有办法创建这种效果（当然没有 flash 或 java）所以它也可以在 Opera 和 IE 中工作？

编辑：

HTML

<div id="starholder">
  <div id="star"></div>
</div>​

CSS

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}

#starholder    { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    margin: 100px 0 0 100px; 
}

#star    {
    background: url(http://3.bp.blogspot.com/__RwzDZn-SJM/RoEJcKxDs6I/AAAAAAAAAAQ/XYAyhQG2kcw/s320/hypnosis.gif) 0 0 no-repeat; 
    position: absolute; 
    top: -100px; 
    left: -100px; 
    width: 320px; 
    height: 320px; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 12000ms;
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin; 
    -moz-animation-duration: 12000ms;
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin; 
    -ms-animation-duration: 12000ms;
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear;
}

​</p>

Answer 1

这就是我实施它的方式。它适用于 chrome、safari、firefox 和 ie 11。我已经测试了 chrome、safari 和 firefox 的几个版本，但很抱歉我没有可靠的版本列表。

根据这个http://css-tricks.com/snippets/css/keyframe-animation-syntax/支持的版本是 Firefox 5+、IE 10+、Chrome、Safari 4+、Opera 12+。

.rotate {
    display: inline-block;
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: rotate; 
    -o-animation-duration: 2s; 
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@-o-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

Answer 2

你可能想看到这个

http://fgnass.github.com/spin.js/

这与您正在寻找的效果并不完全相同，但您可以从可用链接中找到提示和示例代码。

Answer 3

这也是一个可以尝试的解决方案。 http://neteye.github.com/activity-indicator.html