分解成两部分，1部分是实现四分之三圆；另一部分是旋转。

1、四分之三圆：

设置border-radius:50%即可画出一个圆，然后设置三条边框为红色，另外一条为透明，即画出了四分之三个圆边框（即外圆）。

.out-round {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 150px auto;
  border: 3px solid #FF298C;
  border-left: 3px solid transparent;
  animation: outRound 1s linear infinite running;
}

2 实现旋转：

圆圈的动画，为其设置的动画就是旋转一圈，infinite表示无限次。

@keyframes outRound {
  0% {
  transform: rotate(120deg)
  }
  100% {
  transform: rotate(-240deg)
  }
}

其中rotate(120deg)为旋转起始位置，可根据实际情况调整