css半圆里面写字沿边走

CSS中的半圆形设计非常常见，通常用于制作进度条、标识等等。这篇文章将介绍如何在半圆形内部写字并且让字沿着边缘走。

html:
<div class="semi-circle">
  <span>50%</span>
</div>

css：
.semi-circle {
  width: 120px;
  height: 60px;
  background-color: #ccc;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  position: relative;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

.semi-circle::before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 60px solid #ccc;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  top: -60px;
}

.semi-circle span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  white-space: Nowrap;
  animation: run 3s ease-in-out infinite;
}

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

首先看一下HTML代码，这里使用了一个div容器，并且设置一个class为semi-circle。在div里面使用了一个span标签来写入文字内容，这里写入50%。为了让文字沿着半圆形边缘走，需要使用CSS伪元素before，实现代码如下：

.semi-circle::before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 60px solid #ccc;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  top: -60px;
}

在这里before伪元素设置了一个三角形，高度为60px，宽度为0，然后上边框设置了半径为60px的圆角，左右边框设置了透明的边框，这样既形成了一个无实体的三角形，也实现了边框圆角功能。

然后，我们需要让文字沿着半圆形边缘走，使用CSS动画来实现。设置一个@keyframes属性，实现文字旋转360度，代码如下：

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

最后将动画设置到span标签上：

.semi-circle span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  white-space: Nowrap;
  animation: run 3s ease-in-out infinite;
}

这里将span标签绝对定位，水平居中和垂直居中，然后设置动画名称和动画执行时间。

这就是如何在CSS半圆形内部写字并且让字沿着边缘走的全过程，代码虽然稍微复杂，但是效果非常炫酷，值得学习和尝试。