css 实现圆形渐变进度条效果的示例代码

下面我来详细讲解如何使用 CSS 实现圆形渐变进度条效果的完整攻略。

1. 实现思路

首先，我们需要了解如何使用 CSS 绘制圆形。

CSS 中可以通过设置圆形元素的 border-radius 属性来实现圆形。我们可以将元素的 width 和 height 属性设置为相等的值，再把 border-radius 设置为一半的值，就能够绘制出一个完整的圆形了。

然后，我们需要使用 CSS 的渐变效果来实现进度条。

CSS 中的渐变效果可以通过设置 background-image 属性来实现。利用 linear-gradient 或 radial-gradient 来分别绘制线性渐变和径向渐变。我们现在需要的是径向渐变，因为我们要求的是一个圆形的进度条。可以设置圆形渐变的中心点和半径来控制渐变的范围。

最后，我们需要通过设置动画效果来实现进度条的动态效果。

我们可以使用 CSS 的 @keyframes 规则来定义动画序列，再通过给元素设置 animation 属性来启动动画。

2. 示例代码

下面是几个使用 CSS 实现圆形渐变进度条效果的示例代码：

示例 1：基础的圆形渐变进度条

HTML 代码：

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

CSS 代码：

.circle-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: radial-gradient(circle at center, #16a085 0%, #1abc9c 50%, #2ecc71 100%);
  animation: progress 2s linear infinite;
}

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

这个示例中，我们定义了一个圆形元素，设置了它的 width 和 height 属性为 100px，border-radius 属性为 50%，从而让这个元素形成一个完整的圆形。然后，我们使用 radial-gradient 属性在元素的背景上设置了一个径向渐变，从 #16a085 到 #1abc9c 到 #2ecc71，表示进度从 0% 变化到 50% 到 100%。最后，我们设置了一个名为 progress 的动画序列，让元素在 2 秒内以线性的方式无限循环旋转，从而形成了一个动态的圆形渐变进度条效果。

示例 2：带有文本和百分比的圆形渐变进度条

HTML 代码：

<div class="circle-progress-with-text">
  <span class="circle-progress-percent">0%</span>
</div>

CSS 代码：

.circle-progress-with-text {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: progress 2s linear infinite;
}

.circle-progress-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}

.circle-progress-with-text:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(circle at center, #16a085 0%, #1abc9c 50%, #2ecc71 100%);
  clip: rect(0 50px 100px 0);
}

.circle-progress-with-text:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  clip: rect(0 50px 100px 0);
}

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

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

@keyframes mask {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.circle-progress-with-text:before {
  animation: circle 2s ease-in-out 0s infinite alternate;
}

.circle-progress-with-text:after {
  animation: mask 2s ease-in-out 0s infinite alternate;
}

.circle-progress-percent:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  clip: rect(0 50px 100px 0);
  background-color: #fff;
  transform: rotate(-90deg);
}

.circle-progress-percent:after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-percent);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  clip: rect(0 50px 100px 0);
  background-color: #2ecc71;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}

在这个示例中，我们使用了伪元素和 before、after 定义多个元素绑定不同的动画。我们先对圆形进度条元素设置了 position: relative; 属性，然后，在它的前后两层分别设置了一个带有径向渐变和滑动遮罩的背景元素。在圆形进度条元素内部，我们又创建了一个带有百分比文本的元素，它实际上是一个空白元素，在 before 和 after 中使用动画实现百分比的动态变化，从而呈现出一个完整的进度条效果。

通过设置不同的 animation 和 @keyframes 规则实现不同的动画效果，我们就能够创造出丰富的、优美的圆形渐变进度条了。