作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在尝试为这种效果找到一个跨浏览器的解决方案,但这是我能找到的最好的解决方案:
它对 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;
}
最佳答案
这就是我实现它的方式。它适用于 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);}
}
关于javascript - 无休止地旋转图像/div(跨浏览器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11129191/
我正在 CSS 和 JS 中使用 Canvas 上的 DOM 创建一个类似小行星的简单游戏,用于……实验目的。 在这个例子中我的代码非常小,可以很容易地看到下面发生了什么。最终目标:让箭头键顺畅地旋转
我是一名优秀的程序员,十分优秀!