带动画效果的饼图

@keyframes spin {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(.5turn);
    }
}
@keyframes changeColor {
    50% {
        background-color: rgb(157, 30, 30);
    }
}
div {
  position: relative;
  left: 30%;
  top: 30%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: green;
  background-image: linear-gradient(90deg, transparent 0 50%, rgb(157, 30, 30) 0);
}

div::before {
  content: '';
  display: block;
  height: 100%;
  margin-left: 50%;
  background-color: green;
  border-radius: 0 100% 100% 0 / 50%;
  transform-origin: left;
  animation: spin 3s linear infinite,
    changeColor 6s step-end infinite;
}