使用CSS和Javascript实现无限旋转动画

Question

使用CSS和Javascript实现无限旋转动画

javascriptjquerycssjquery-animatecss-animations

12

我正在查看一些单页面网站示例，发现了这个：http://alwayscreative.net/。我被背景中无限旋转的圆盘完全惊呆了。我已经查看了一些示例，但都没有起到那种效果。有人能告诉我这是如何实现的吗？谢谢。

- Anuj Kaithwas

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

@Ohgodwhy：在我的网页上使用其他图片也不起作用。 - Anuj Kaithwas

1

@Anuj Kaithwas 嗯，那是因为 rotation1 是预定义的 CSS 关键字... 为什么不检查一下这个 CSS 文件并查看其中的关键帧呢？（http://www.alwayscreative.net/stylesheets/screen.css） - Ohgodwhy

https://dev59.com/QGw15IYBdhLWcg3wxugh - blackgreen

5个回答

3

这个示例非常好地实现了无限旋转：

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/

- Mohammad Ghaheri

2

以下是如何在您的示例中实现：

@-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{
  from{transform:rotate(0deg);}
  to{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}

- Thony

2

请检查这行代码。我们可以使用CSS3旋转图像。我已经在Chrome中测试过，效果很好。 http://jsfiddle.net/sUHKh/

- Muthukumar M

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

1

我刚在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;
}

- Phil

是的，我在Firebug上试过了，但它无法旋转我在网页中使用的任何图像。 - Anuj Kaithwas

你有任何可以展示的代码吗？ - Phil

1

你还需要添加 keyframes 规则才能使其正常工作。 - Deepak Kamat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

无尽旋转 - CSS3动画属性和关键帧：

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }

<img src="https://istack.dev59.com/qCWYU.webp?s=64&g=1" />

或者您可以使用rotate(1turn)代替度数