css进度条动画百分比

您可以使用CSS3中的动画和关键帧来创建一个进度条动画，并使用伪元素(::before或::after)来显示百分比。以下是一个示例代码：

HTML代码：

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

CSS代码：

/* 进度条容器样式 */
.progress-bar {
  width: 300px;
  height: 10px;
  background-color: #ddd;
  position: relative;
}

/* 进度条内部样式 */
.progress-bar-inner {
  width: 0%;
  height: 100%;
  background-color: #007bff;
  position: absolute;
  top: 0;
  left: 0;
  animation: progress-animation 3s ease;
}

/* 进度条动画关键帧 */
@keyframes progress-animation {
  0% { width: 0; }
  100% { width: 100%; }
}

/* 显示百分比样式 */
.progress-bar-inner::before {
  content: attr(data-percent);
  display: block;
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

在上面的代码中，我们创建了一个进度条容器和内部元素。我们使用动画和关键帧来实现进度条的动画效果。我们还使用伪元素来显示百分比文本，并使用属性选择器将百分比值存储在data-percent属性中。

您可以通过更改.progress-bar-inner元素的宽度来控制进度条的百分比。在上面的示例中，我们将动画持续时间设置为3秒，并使用ease函数使动画平滑地开始和结束。