9

）画面の左上にある星の画像を連続的に回転させたいと思っています。ブラウザ Mozilla Firefox、Google chrome で画像を連続的に回転させる方法を教えてください。[Css 位置タイプは「絶対」で、画像解像度:25*25]

4

5 に答える 5

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

img.star {
    -webkit-animation-name:            rotate; 
    -webkit-animation-duration:        0.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

、などのルールを追加-moz-transform/animationして、-ms-transform/animation他のブラウザをサポートします。

アニメーション GIF を作成することもできます :)。

アップデート

アニメーションのサポートは最新のブラウザーで利用できます。つまり、プレフィックスを削除できます。

(逆回転の場合は、'from' と 'to' を反転させます)

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

img.star {
    animation-name:            rotate; 
    animation-duration:        0.5s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

略記:

img.star {
    animation: rotate 0.5s infinite linear;
}
于 2012-04-12T12:41:45.420 に答える
8

CSS でそれを行うことができます: (GPU コアを利用):

img{ 
    animation:2s rotate infinite linear; 
}

@keyframes rotate{
    100%{ transform:rotate(1turn) } // or 360deg
}
<img src="https://ih0.redbubble.net/image.364229144.1663/flat,200x200,075,t.jpg">

于 2012-04-12T12:41:35.063 に答える
3

RaphaelJS はクロスブラウザー互換であるため、使用できます。たとえば、次のコードは機能するはずです。

<div id="paper" style="width:300px; height:200px"></div>

<script type="text/javascript" src="(link to downloaded copy of raphaeljs)"></script>

<script type="text/javascript">
var paper = Raphael("paper");
var good_cat = paper.image( "http://pp19dd.com/_old/lily.png",40,20,96, 145);
var evil_cat = paper.image( "http://pp19dd.com/_old/cookie.png",160,20,96, 145);
var angle = 0;

setInterval( function() {
    angle += 45;       
    good_cat.stop().animate( { "transform": "R" + angle }, 300, "<>" );
}, 500 );


setInterval( function() {
    r = parseInt(Math.random() * 359);
    evil_cat.stop().animate( { "transform": "R" + r }, 300, "<>" );
}, 1000 );
</script>

例については、 http://jsfiddle.net/AJgrU/を参照してください。

于 2012-04-12T12:49:17.367 に答える
3

CSS3 アニメーションと変換を使用した jsFiddle の実例: http://jsfiddle.net/GcjKZ/1/ http://jsfiddle.net/GcjKZ/3/

img { position: absolute; width: 25px; height: 25px; 
  -moz-animation: 3s rotate infinite linear  ;
  -moz-transform-origin: 50% 50%; 
  -webkit-animation: 3s rotate infinite linear  ;
  -webkit-transform-origin: 50% 50%;  
}

@-moz-keyframes rotate {
    0    { -moz-transform: rotate(0); } 
    100% { -moz-transform: rotate(360deg); }  
}

@-webkit-keyframes rotate {
    0%    { -webkit-transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); } 
}

(申し訳ありませんが、私の星はあまり中心にありません)

于 2012-04-12T12:50:22.873 に答える
1

これを試してください http://code.google.com/p/jquery-rotate/

そして、あなたはこのようにすることができます：

 var angle = 1;
  $(document).ready(function() {
        setInterval(function() {
                $("#pic").rotate(angle);
             }, 100);
 });
于 2012-04-12T12:38:26.840 に答える