7

私はこの効果のクロスブラウザソリューションを見つけようとしていますが、これは私が見つけることができる最高のものです：

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

また、CPUにも非常に適しています。

一部の非クロスブラウザJavaScriptソリューションは、ほぼ50％のCPUを使用します。私の意見では、それはWeb使用の解決策ではありません。

提供されている例は、Chrome 17、Firefox 11、およびSafari5.1.7で機能します。

だから私の質問は：この効果を（もちろんフラッシュや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>

4

3 に答える 3

2

これが私がそれを実装している方法です。chrome、safari、firefox、つまり 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);}
}
于 2014-11-17T16:14:06.483 に答える
0

これも試してみることができる解決策です。 http://neteye.github.com/activity-indicator.html

于 2012-06-20T22:51:07.230 に答える
0

あなたはこれを見たいかもしれません

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

探している効果とまったく同じではありませんが、利用可能なリンクからヒントとサンプルコードを見つけることができます。

于 2012-06-20T22:40:31.740 に答える