使用 CSS 和 Javascript 的无限旋转动画

Question

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

原文由 Anuj Kaithwas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

或者您可以使用以下 学位 代替学位： rotate(1turn)

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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/

原文由 Mohammad Ghaheri 发布，翻译遵循 CC BY-SA 3.0 许可协议