Javascript 无休止地旋转图像/分区（跨浏览器）

我正试图找到一个跨浏览器的解决方案来实现这种效果，但这是我能找到的最好的解决方案：

它也是非常CPU友好的

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

提供的示例适用于Chrome17、Firefox11和Safari5.1.7

所以我的问题是：有没有一种方法可以产生这种效果（当然没有flash或java），这样它也可以在Opera和IE中使用

编辑：

HTML

---

​

您可能想看看这个

---

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

这也是一个可以尝试的解决方案。

---

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

根据这一点，支持的版本有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);}
}

---

把你的代码放在你的问题里。你不能仅仅依靠小提琴链接。如果你添加

-o-关键帧

和

-ms关键帧

，你会得到一些Opera支持（我不确定确切的版本号）和IE 10支持，至少：）@minitech:你能提供一个例子吗？@Drejon:看看在所有这些地方都写着

-webkit

？复制整个部分，然后粘贴两次，然后分别用

-ms

和

-o

替换每个部分中的

-webkit

实例。@minitech:这对Opera很有效，但它占用了大量CPU..这样他就可以读取代码并找出实现技巧了吗？我不知道这和他想做的有什么关系。有趣的效果，但我也认为，这和我想做的完全不同。这几乎和乌斯曼的效果一样——这不是我想做的。

.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);}
}