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 :)。

更新

大多数当前浏览器都提供动画支持，这意味着可以删除前缀：

（对于反向旋转翻转“从”和“到”）

@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 回答