如何制作带内部文本和CSS动画效果的Donut Chart（环形图）

以下代码可直接嵌入现有项目，完全适配你要的效果，按需调整参数即可：

<div class="donut-chart">
  <!-- 环形图主体 -->
  <div class="donut-ring"></div>
  <!-- 切片文本，可自行增减数量 -->
  <div class="slice-text text-1">30%</div>
  <div class="slice-text text-2">50%</div>
  <div class="slice-text text-3">20%</div>
  <!-- 中心空白区域 -->
  <div class="donut-center"></div>
</div>

.donut-chart {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}
/* 环形色块主体 */
.donut-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 锥渐变实现切片，修改后面的百分比即可调整切片占比，颜色也可自行替换 */
  background: conic-gradient(#ff6b6b 0% 30%, #4ecdc4 30% 80%, #45b7d1 80% 100%);
  animation: donutGrow 1.5s ease-out forwards;
}
/* 中心空白区，调整宽高即可修改环形粗细 */
.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #fff;
}
/* 切片文本通用样式 */
.slice-text {
  position: absolute;
  font-weight: 600;
  color: #fff;
  font-size: 18px;
  animation: textFade 0.8s ease-out 1s forwards;
  opacity: 0;
}
/* 切片文本定位，按实际切片占比调整坐标即可 */
.text-1 {
  top: 65px;
  left: 160px;
}
.text-2 {
  top: 160px;
  left: 70px;
}
.text-3 {
  top: 110px;
  left: 210px;
}
/* 环形入场生长动画 */
@keyframes donutGrow {
  0% {
    background: conic-gradient(#ff6b6b 0% 0%, #4ecdc4 0% 0%, #45b7d1 0% 0%);
  }
  30% {
    background: conic-gradient(#ff6b6b 0% 30%, #4ecdc4 30% 30%, #45b7d1 30% 30%);
  }
  80% {
    background: conic-gradient(#ff6b6b 0% 30%, #4ecdc4 30% 80%, #45b7d1 80% 80%);
  }
  100% {
    background: conic-gradient(#ff6b6b 0% 30%, #4ecdc4 30% 80%, #45b7d1 80% 100%);
  }
}
/* 文本淡入动画 */
@keyframes textFade {
  to {
    opacity: 1;
  }
}

• 无任何第三方依赖，原生HTML+CSS实现，兼容所有主流现代浏览器
• 可直接替换颜色、占比、尺寸、动画时长参数适配你的项目设计规范
• 切片文本的定位可以通过浏览器开发者工具调试到匹配你需求的位置后再固化参数

内容的提问来源于stack exchange，提问作者hussain ismail