如何使用纯 CSS 创建连续旋转的动画？-css教程-PHP中文网

如何使用纯 CSS 创建连续旋转的动画？

Linda Hamilton

发布： 2024-11-05 10:24:02

原创

464 人浏览过

How to create a continuously rotating animation using pure CSS?

使用 CSS 无限旋转动画

请求：

使用 pure 无限期旋转加载图标CSS.

代码：

<code class="css">#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}</code>

登录后复制

问题：

提供的代码不会启动旋转动画，因为

解决方案：

要使用 CSS 实现连续旋转，我们需要使用动画。在本例中，我们使用 @keyframes 规则来定义动画并应用动画 CSS 属性。

更新的代码：

<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

登录后复制

此更新的代码定义旋转动画，由持续 2 秒的 360 度旋转组成。无限迭代计数设置可确保动画无限重复。

以上是如何使用纯 CSS 创建连续旋转的动画？的详细内容。更多信息请关注PHP中文网其他相关文章！