【问题标题】：How to Make a Picture rotate Continuously? [closed]如何让图片连续旋转？ [关闭]
【发布时间】：2021-01-26 22:59:09
【问题描述】：

) 我的屏幕左上角有一个星形图像想要连续旋转。所以谁能告诉我我们怎样才能让图片连续旋转浏览器Mozilla Firefox，Google chrome！？ [Css 位置类型为“绝对”，图像分辨率：25*25]

【问题讨论】：

既然这么小，为什么不做一个动画gif呢？
这显然是一个预加载器。不需要额外的 javascript 和代码，也不需要额外 1kb 的 GIF 文件的加载时间，尤其是 jQuery
CarrieKendall : jquerycss 并且它在 Google Chrome 浏览器上不起作用！需要他们的代码！：O tnx 4 好主意;;) rickyduck : 好主意！:-!:-/;)
如果您只想要一个预加载器图像，也许这可能有用：ajaxload.info
stackoverflow.com/questions/7988962/…

标签： javascript jquery html css

【解决方案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 :)。

更新

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

（对于反向旋转翻转'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;
}

【讨论】：

GIF 比较重。您的解决方案看起来是最佳实践。
动画现在得到了很好的支持：caniuse.com/#search=animation所以我更新了答案

【解决方案2】：

您可以使用 CSS 做到这一点：（利用您的 GPU 核心）：

img{ 
    animation:2s rotate infinite linear; 
}

@keyframes rotate{
    100%{ transform:rotate(1turn) } // or 360deg
}

&lt;img src="https://ih0.redbubble.net/image.364229144.1663/flat,200x200,075,t.jpg"&gt;

【讨论】：

除了我认为他们定位的旧浏览器
他明确表示他不会针对他们。
不，他说对于“Mozilla Firefox，Google chrome”，FF 尤其是 3.1 及以下版本的 css 转换支持很少且不存在（请记住 ff 3.1 没有自动更新程序和许多人仍在使用它）
你喜欢骚扰我吗？这就是答案，就是这样。
我只是在说明这一点，因为这是一个社区网站，其他人可能会查看此答案，我添加到您的答案有什么问题？

【解决方案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/。

【讨论】：

+1 for Raphael.js 一个用于图像和 svg 操作的优秀 js 库
+1 应该奖励给猫，而不是功能。 ;) 谢谢。

【解决方案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); } 
}

（对不起，我的星星没有很好地居中）

【讨论】：

这是一个带有中心星的 :) 但旋转不起作用？ jsfiddle.net/GcjKZ/2
我的意思不是在窗口上“居中”。我说的是关于它的形状的图形中心。你的小提琴对我有用
我的错，反正我用的是 chrome 18.0.1025.152 m，不过在 ff 中完美运行
呃 - 很好 - 我认为你在 webkit 中发现了一个错误（或者它只是 Firefox 更宽容？）：它接受 0% 但不接受 0 内的关键帧：见 @987654324 @

【解决方案5】：

试试这个http://code.google.com/p/jquery-rotate/

你可以这样做：

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

【讨论】：