css圆形进度条动画

CSS 圆形进度条动画是通过 CSS3 中的 @keyframes 规则和 transform 属性来实现的。以下是一个简单的圆形进度条动画示例：

HTML 代码：

<div class="progress">
  <div class="progress-bar"></div>
</div>

CSS 代码：

.progress {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ddd;
}

.progress-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #007bff;
  transform-origin: center center;
  animation: progress 2s linear forwards;
}

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

解释一下上述代码：
1. `.progress` 类定义了一个圆形容器，其宽度和高度都为100px，且使用了圆角半径为50%的圆角。
2. `.progress-bar` 类定义了一个圆形进度条，其宽度和高度都为100%（与父容器相同），并且使用了圆角半径为50%的圆角。通过 `transform-origin` 属性设置其变换的中心点为容器的中心。
3. 使用 `animation` 属性指定了动画名称为 `progress`，持续时间为2秒，动画速度为线性，结束时保持最后一帧状态（`forwards`）。
4. 在 `@keyframes` 规则中定义了 `progress` 动画的两个关键帧。从 `0deg` 开始旋转，到 `360deg` 结束旋转，完成一个完整的进度。