无尽的旋转图像/ 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;
}

​

Answer 1

你可能想看这个

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

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