CSS圆形彩虹颜色旋转

Question

我希望能够像这张图片一样创建一个多色圆圈 http://forums.androidcentral.com/attachments/android-app-inventor/114178d1398172852t-game-free-true-color-icon_256.png

让它无限旋转..Ionic 应用程序需要它，如果有人知道这个应用程序有示例 https://play.google.com/store/apps/details?id=com.aurelhubert.truecolor&hl=it

Answer 1

使用 CSS 关键帧动画结合旋转变换实际上非常简单:

div {
  background: url(http://forums.androidcentral.com/attachments/android-app-inventor/114178d1398172852t-game-free-true-color-icon_256.png) no-repeat;
  width: 256px;
  height: 256px;
  -webkit-animation: rot 4s linear 0s infinite;
     -moz-animation: rot 4s linear 0s infinite;
       -o-animation: rot 4s linear 0s infinite;
          animation: rot 4s linear 0s infinite;
}

@-webkit-keyframes rot { from { transform: rotate(0deg) } to { transform: rotate(360deg) }
   @-moz-keyframes rot { from { transform: rotate(0deg) } to { transform: rotate(360deg) }
     @-o-keyframes rot { from { transform: rotate(0deg) } to { transform: rotate(360deg) }
        @keyframes rot { from { transform: rotate(0deg) } to { transform: rotate(360deg) }

<div></div>

当然，您可以通过在关键帧中指定更多规则来实现更奇特的效果，但这应该足以让您入门。

有用的链接:

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform