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>

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

有用的链接：

CSS圈彩虹色旋转

1 个答案: