如何通过css实现元素旋转动画

实现元素旋转动画需结合transform、@keyframes和animation。首先用transform: rotate()设置旋转角度，再通过@keyframes定义从0deg到360deg的动画帧，接着使用animation属性指定动画名称、时长、速度曲线和循环次数，如animation: spin 2s linear infinite可实现匀速无限旋转。常用于加载动画或悬停效果，注意设置transform-origin确保旋转中心正确，默认为center center。

要实现元素的旋转动画，核心是使用 CSS 的 transform 和 @keyframes 配合 animation 属性。下面介绍具体实现方法。

1. 使用 transform: rotate() 实现基础旋转

你可以通过 transform: rotate() 让元素旋转指定角度。例如让一个盒子旋转 45 度：

.box {
  transform: rotate(45deg);
}

这只是一个静态旋转。如果想让它动起来，就需要加入动画。

2. 使用 @keyframes 定义旋转动画

通过 @keyframes 可以定义动画的关键帧。比如从 0 度转到 360 度：

立即学习“前端免费学习笔记（深入）”；

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

也可以写成百分比形式，便于控制中间状态：

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3. 应用 animation 播放旋转动画

将定义好的动画应用到目标元素上，设置动画时长、循环次数等：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  animation: spin 2s linear infinite;
}

上面代码中：

• spin 是动画名称
• 2s 表示动画持续 2 秒
• linear 表示匀速运动
• infinite 表示无限循环

4. 常见应用场景与技巧

旋转动画常用于加载图标、按钮悬停效果等。例如鼠标悬停时旋转：

.button:hover {
  animation: spin 0.5s ease forwards;
}

注意：forwards 表示动画结束后保持最后一帧的状态。

若需绕中心点精准旋转，确保元素的变换原点正确：

.box {
  transform-origin: center center;
}

大多数情况下默认就是中心点，但对行内元素或定位元素可能需要手动设置。

基本上就这些。掌握 rotate、@keyframes 和 animation 的组合，就能轻松做出流畅的旋转动画。不复杂但容易忽略细节，比如 transform-origin 和动画完成后的状态控制。多试几次就能熟练了。

以上就是如何通过css实现元素旋转动画的详细内容，更多请关注php中文网其它相关文章！