使用 CSS 和 Javascript 的无限旋转动画 [关闭]

Posted 2023-03-06

【中文标题】使用 CSS 和 Javascript 的无限旋转动画 [关闭]

【英文标题】：Infinite rotation animation using CSS and Javascript [closed]

【发布时间】：2012-08-14 16:35:19

【问题描述】：

我正在浏览一些单页网站示例，发现：http://alwayscreative.net/。我对背景中无限旋转的圆盘感到非常惊讶。我看过一些例子，但没有一个是这样的。谁能告诉我这是如何实现的。 谢谢。

【问题讨论】：

-browserSpecificSyntax-animation: 30s linear 0s normal none infinite rotation1;

@Ohgodwhy：使用任何其他图像在我的网页中都不起作用。

@Anuj Kaithwas well duh...那是因为rotation1 是一个预定义的 CSS 键...@-webkit-keyframes rotation1 /* line 220, ../sass/screen.scss */ from -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); why not just inspect this CSS file and check out the keyframes within?

【参考方案1】：

CSS3：

@keyframes rotate360 
  to  transform: rotate(360deg); 

img  animation: 2s rotate360 infinite linear; 
/* TODO: Add -vendor-prefixes for different browsers */

<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />

【讨论】：

没有理由在 jQuery 1.8 中使用基于浏览器的选择器作为前缀。

@Roko: 嘿，我知道这很蹩脚，你能帮我解决一个 JS 问题吗 :D，我很久以前就在这里发布过，但还没有解决，也许你可以给我是你的电子邮件 ID 或 fb id...

@Roko ***.com/questions/11883124/…

让我们continue this discussion in chat

可以改变循环的持续时间吗？

【参考方案2】：

这个例子很好地实现了无限旋转：

div
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;
    -webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 2s linear infinite;
    -ms-animation: rotation 2s linear infinite;


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

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

@-ms-keyframes rotation 
    0%    -ms-transform: rotate(0deg); 
    100%  -ms-transform: rotate(360deg); 

你可以在这里测试它：http://jsfiddle.net/HS68a/2/

【参考方案3】：

请检查这一行。我们可以使用 css3 来旋转图像。我将在 chrome 中测试工作正常 http://jsfiddle.net/sUHKh/

【讨论】：

请在答案中包含相关代码和描述，以便在链接失效时我们有完整的答案

【参考方案4】：

这是您的示例中的实现方式：

@-webkit-keyframes rotation1
from-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)
to-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)
@-moz-keyframes rotation1
from-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)
to-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)
@-o-keyframes rotation1
from-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)
to-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)

.vector1-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite

但我没有看到任何兴趣（我敢说这似乎有点奇怪......）将浏览器前缀转换放在其他浏览器特定的关键帧中。

它还缺少通用关键帧和 IE10 支持，所以我是这样实现的：

@-webkit-keyframes rotation1
  from-webkit-transform:rotate(0deg);
  to-webkit-transform:rotate(360deg);

@-moz-keyframes rotation1
  from-moz-transform:rotate(0deg);
  to-moz-transform:rotate(360deg);

@-o-keyframes rotation1
  from-o-transform:rotate(0deg);
  to-o-transform:rotate(360deg);

@keyframes rotation1
  fromtransform:rotate(0deg);
  totransform:rotate(360deg);
  
.vector1-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite

【参考方案5】：

我刚刚在 Chrome 中做了一个“检查元素”。这是 CSS。

.vector1 
  -moz-animation: rotation1 30s linear infinite;
  -o-animation: rotation1 30s linear infinite;
  -webkit-animation: rotation1 30s linear infinite;
  animation: rotation1 30s linear infinite;

【讨论】：

是的，我在 firebug 上做过，但它不会旋转我在网页中使用的任何图像。

你有什么代码可以展示吗？

您还需要添加keyframes 规则才能使其工作。