使用 CSS3 实现动态旋转加载动画是一个非常常见的设计效果，通常用于加载状态的指示。通过 @keyframes和 transform 属性，结合 CSS 动画，可以轻松创建一个不断旋转的加载图标。

实现思路

  1. @keyframes 动画：用于定义从旋转 0 度到 360 度的过渡效果。
  2. transform: rotate()：实现图标的旋转效果。
  3. animation 属性：控制动画的持续时间、速度曲线和循环方式。

示例代码

1. HTML 结构

首先，创建一个容器，里面放置一个旋转加载图标。例如，可以使用 FontAwesome 图标库中的旋转图标。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转加载动画</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="loading-container">
    <i class="fas fa-sync-alt loading-icon"></i> <!-- FontAwesome旋转图标 -->
  </div>
</body>
</html>

2. CSS 样式

接下来，通过 CSS 实现图标的旋转加载效果。

/* 1. 页面背景和布局 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
}

/* 2. 旋转加载容器 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 3. 旋转图标样式 */
.loading-icon {
  font-size: 50px; /* 设置图标大小 */
  color: #007bff; /* 设置图标颜色 */
  animation: spin 2s linear infinite; /* 设置旋转动画 */
}

/* 4. 定义旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg); /* 从0度开始 */
  }
  100% {
    transform: rotate(360deg); /* 旋转360度 */
  }
}

解释与分析

  1. @keyframes spin：我们定义了一个名为 spin 的动画，元素从 0deg 旋转到 360deg，以实现一个完整的旋转。
  2. .loading-icon：这个类应用于 FontAwesome 的旋转图标，通过 animation: spin 2s linear infinite属性来控制动画：
    • spin：应用我们定义的旋转动画。
    • 2s：动画的持续时间为 2 秒。
    • linear：动画匀速进行。
    • infinite：动画无限循环。
  3. .loading-container：这是包含图标的容器，设置了圆形的背景，并为图标提供了阴影和居中效果。

3. 调整与自定义

  • 调整动画速度：通过修改 2s 为不同的数值，来控制旋转的速度。比如，1s 代表动画会在 1 秒内完成旋转。
  • 图标大小与颜色：你可以通过修改 .loading-icon 的 font-size 和 color 来调整图标的大小和颜色。
  • 改变容器样式：通过修改 .loading-container 的背景颜色、圆角、阴影等样式，可以定制容器的外观，使其适配不同的设计风格。

示例效果

当页面加载时，旋转的加载图标会不断旋转，提示用户正在等待操作或数据加载完成。

总结

使用 CSS3 的 @keyframes 动画和 transform 属性，结合 animation 控制动画效果，我们可以轻松创建一个流畅且美观的旋转加载动画。这种效果非常适用于网页或应用的加载指示器，提升用户体验。

如果你有更多问题或想要更深入的定制，欢迎继续提问！