html静态圆形进度条代码,css3 clip实现圆环进度条的示例代码

以下是一个基于 HTML 和 CSS3 clip 的静态圆形进度条的示例代码：

HTML：

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

CSS：

.progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 20px auto;
  border-radius: 50%;
  background-color: #f2f2f2;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.progress-bar, .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.progress-bar {
  clip: rect(0, 60px, 120px, 0);
  background-color: #2ecc71;
  transform: rotate(-90deg);
  z-index: 1;
}

.progress-fill {
  clip: rect(0, 120px, 120px, 60px);
  background-color: #3498db;
  transform: rotate(-90deg);
}

解释：

- `.progress-ring` 用于包含整个进度条，设置为圆形，背景色为灰色；
- `.progress-bar` 用于表示已完成的进度部分，背景色为绿色；
- `.progress-fill` 用于表示未完成的进度部分，背景色为蓝色；
- `clip` 属性用于剪切元素，通过设置不同的矩形区域来实现圆环效果；
- `transform` 属性用于旋转元素，使进度条从顶部开始；
- `z-index` 属性用于控制层叠顺序，使绿色部分在蓝色部分之上。

可以根据需要修改颜色、大小等样式。