css3实现圆环百分比进度

可以使用CSS3中的transform和animation属性来实现圆环百分比进度的效果，具体步骤如下：

1. 创建一个圆环的基本样式，设置圆环的宽度、颜色和边框样式：

.progress {
  width: 100px;
  height: 100px;
  border: 10px solid #eee;
  border-radius: 50%;
  position: relative;
}

.progress:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
}

2. 使用transform属性将圆环旋转90度，使起点从顶部开始：

.progress:before {
  transform: rotate(-90deg);
}

3. 使用animation属性设置动画效果，将圆环的进度从0%到指定百分比：

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  animation: progress 2s ease-out forwards;
}

@keyframes progress {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(calc(-90deg + (360 * 80 / 100)));
  }
}

其中，animation属性中的forwards参数表示动画结束后保持最后一帧状态，calc函数用来计算旋转角度。

4. 在HTML中添加进度条的容器，并设置对应的百分比：

<div class="progress" data-progress="80"></div>

5. 使用JavaScript获取进度条容器和其对应的百分比，将百分比值设置为圆环的进度：

const progress = document.querySelector('.progress');
const percent = progress.getAttribute('data-progress');

progress.style.setProperty('--progress', `${percent}%`);

6. 最后，在CSS中使用var函数获取JavaScript设置的进度值，并将其应用到圆环的进度样式中：

.progress:after {
  transform: rotate(calc(-90deg + (360 * var(--progress) / 100)));
}

这样就可以实现一个简单的圆环百分比进度条。