没啥用系列 之《太极图》

效果：

css部分：

.taiji{
  position: relative;
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  background-color: #000;
  /*从0-50%用背景色。50%开始到100%用#fff*/
  background-image: linear-gradient(to right,transparent 50%,#fff 50%);/*图像的线性渐变*/
  animation: Spin 4s ease-in-out infinite;
}

@keyframes Spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.taiji::before{  
  content:'';
  position: absolute;
  left: 75px;
  top:1px;
  width: 0;
  height: 0;
  padding: 25px;
  border-radius: 100%;
  border: 49px solid #000;
  background: #fff;
  // background-clip:padding-box;/*背景被裁剪到内边距框*/
}
.taiji::after{
  content:'';
  position:absolute;
  top:149px;
  left:75px;
  width:0;
  height:0;
  padding:25px;
  border-radius:50%;
  border:49px solid #fff;
  background: #000;
  // background-clip:padding-box;
}

html 部分：

<div class="taiji"></div>