如何让一张图片持续旋转？

Question

我在屏幕左上角有一个五角星图像，希望它能够持续旋转。请问如何让这个图片在Mozilla Firefox和Google Chrome浏览器中持续旋转呢？（CSS定位类型为“绝对”，图片分辨率为25*25）

- Alireza29675

---

既然这很小，为什么不做成动态图呢？ - cosmorogers

这显然是一个预加载器。没有必要为了一个多1KB的GIF而增加额外的JavaScript和代码以及加载时间，尤其是jQuery。 - rickyduck

CarrieKendall：jquerycss在Google Chrome浏览器上无法使用！:O
cosmorogers：你说得对;) 我将尝试为此编写代码，并且还有其他一些图像，因此我也需要它们的代码！:O 感谢您的好主意;;)
rickyduck：好主意！:-!:-/;) - Alireza29675

如果你只需要一个预加载图像，也许这个链接会有用：http://ajaxload.info/ - ONOZ

https://dev59.com/E2sz5IYBdhLWcg3wTl-r - Blazemonger

Answer 1

@-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;
}

- Frank van Wijk

---

GIF比较重。你的解决方案看起来是最佳实践。 - user3806549

动画现在得到了很好的支持：https://caniuse.com/#search=animation 因此我更新了答案。 - Frank van Wijk

Answer 2

你可以使用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">

- vsync

---

除了他们所针对的旧版浏览器之外，我认为其他都可以。 - rickyduck

不，他说的是“Mozilla Firefox，Google Chrome”，特别是FF 3.1及以下版本的CSS过渡支持非常有限甚至不存在（请记住，FF 3.1没有自动更新程序，很多人仍在使用它）。 - rickyduck

我只是在陈述这一点，因为这是一个社区网站，其他人可能会看到这个答案，我添加你的回答有什么问题吗？ - rickyduck

这个答案绝对是问题标题的最佳答案，因为它适用于全尺寸图像，而不是25x25预加载器，对于这种情况，GIF可能不适用，jQuery也可能不可用，而且JavaScript太复杂了。 - rickyduck

好的，我同意，但是说真的，使用低于5版本的FF（用于CSS3动画）的用户数量相当少并且正在下降。http://en.wikipedia.org/wiki/Firefox#Market_adoption - vsync

Answer 3

您可以使用RaphaelJS，因为它是跨浏览器兼容的。例如，下面的代码应该可以正常工作:

<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/查看示例。

- pp19dd

---

+1 for Raphael.js，它是一款出色的JavaScript库，用于图像和SVG操作。 - rickyduck

+1 应该授予给猫，而不是功能性。 ;) 谢谢。 - pp19dd

Answer 4

一个包含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); } 
}

抱歉，我的星星没有真正居中。

- Fabrizio Calderan

---

这里有一个带有居中星号的例子 :) 但是旋转不起作用？http://jsfiddle.net/GcjKZ/2/ - rickyduck

我不是指窗口上的“居中”。我说的是关于图形相对于其形状的中心。你的代码片段对我有效。 - Fabrizio Calderan

我的错，不管怎样我正在使用Chrome 18.0.1025.152 m，在Firefox中完美运行。 - rickyduck

嗯，不错，我认为你在webkit中发现了一个bug（或者只是firefox更加宽容？）：它接受0％但不接受关键帧内的0：请参见http://jsfiddle.net/GcjKZ/3/。 - Fabrizio Calderan

Answer 5

尝试使用http://code.google.com/p/jquery-rotate/这个工具。

你也可以这样做：

 var angle = 1;
  $(document).ready(function() {
        setInterval(function() {
                $("#pic").rotate(angle);
             }, 100);
 });

- coder