阴阳太极图

html代码：

    

    
道生一，一生二，二生三，三生万物

css代码：

body{
  background:#444;
}
@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}
#yinyang{
  width:200px;
  height:200px;
  border-radius:50%;
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
  position:relative;
  margin:100px auto 30px;
  animation-name:spin;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
#yinyang::before{
  content:'';
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:50px;
  left:0;
  border:40px solid black;
}
#yinyang::after{
  content:'';
  width:20px;
  height:20px;
  border-radius:50%;
  background:#000;
  position:absolute;
  top:50px;
  right:0;
  border:40px solid white;
}
p{
  color:#fff;
  text-align:center;
}

输出样式：

太极阴阳图.PNG