如何使用CSS连续旋转图像

如何使用CSS动画连续旋转图像

在建立反应手册登陆页面,我不得不搜索如何旋转图像。我想旋转一个SVG图片,但这适用于任何图片类型。实际上是任何HTML元素。

将此CSS指令添加到要旋转的元素中:

animation: rotation 2s infinite linear;

您也可以选择添加一个rotate类的元素,而不是直接针对它:

.rotate {
  animation: rotation 2s infinite linear;
}

调整2s减慢或加快旋转周期。

然后在任何选择器之外添加以下行:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

而已!您的元素现在应该旋转了。

看看CSS动画CSS过渡导游

这是Codepen中显示的结果:

看笔如何使用CSS动画连续旋转图像由Flavio Copes(@flaviocopes) 在密码笔

Tech Wiki Online!