css旋转动画

作者：恐怖眼神发布日期:2026-06-20 浏览:108

/* 定义一个关键帧动画，命名为 rotate */
@keyframes rotate {
  from {
    transform: rotate(0deg); /* 初始旋转角度为0度 */
  }
  to {
    transform: rotate(360deg); /* 结束时旋转到360度 */
  }
}

/* 应用动画到一个元素上，例如一个 div */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite; /* 使用 rotate 动画，持续时间为2秒，线性过渡，无限循环 */
}

解释说明：

@keyframes rotate：定义了一个名为 rotate 的关键帧动画，从 0deg 开始旋转到 360deg。
transform: rotate()：使用 CSS 的 transform 属性来实现旋转效果。rotate(0deg) 表示初始状态，rotate(360deg) 表示最终状态。
animation：将定义好的 rotate 动画应用到一个 div 元素上。2s 表示动画持续时间为2秒，linear 表示动画以恒定速度进行，infinite 表示动画无限循环。

如果你需要进一步的自定义或有其他问题，请随时告知！

上一篇：css特效网站

下一篇：css media