CSS3制作旋转饼状图

大致思路：

1、先设计一个圆，然后将圆划分为两个颜色

2、然后实现一个伪类，设计一个与上一个圆颜色相反的圆，并让这个圆顺时针旋转630deg

<div class="pig"></div>

css：

* {
  margin: 0;
  padding: 0;
}

.pig {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  margin: 50px auto;
  border-radius: 50%;
  background-image: linear-gradient(to right, transparent 50%, green 0);
  box-shadow: 25px 0 25px -25px gray, -25px 0 25px -25px gray;
}

.pig::before {
  content: '';
  display: block;
  height: 100%;
  margin-left: 50%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: a 3s linear infinite, b 6s step-end infinite;
}

@keyframes a {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(0.5turn);
  }
}

@keyframes b {
  0% {
    background: green;
  }

  50% {
    background-color: skyblue;
  }
}

代码演示：