如何创建无尽的 CSS 旋转动画？

实现无尽的CSS旋转动画

问题：

渴望使用CSS连续旋转加载图标，提供的代码无法产生所需的动画。如何使用 CSS 有效地完成这种旋转？

解决方案：

要使用 CSS 实现无限旋转，请采用以下步骤：

1. 添加 CSS 动画关键帧:

   • 以 @keyframes 表示法定义旋转关键帧。
   • 设置旋转变换的起始和结束状态。

2. 将动画应用到目标元素:

   • 在 CSS 中创建一个旋转类。
   • 应用动画使用动画名称、动画持续时间和动画迭代计数到所需的元素。

3. 包含供应商前缀:

   • 添加 -webkit-、-moz- 等前缀以实现跨浏览器兼容性。

示例代码：

<code class="css">@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

Html:

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>

此修改后的代码确保了元素的连续旋转和无限迭代，解决了之前尝试面临的问题。

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