1.利用伪类做出太极，代码更简洁
<1>伪类，就是伪元素，为什么叫伪元素呢？因为它不是真元素。那哪些标签有伪类呢？所有的非空的标签都有伪类。比如说，input标签就是空元素(没有儿子)，所以它没有伪类，而div标签不是空元素，所以它有伪类。
<2>Google搜索css3 linear gradient generator，使用工具，https://www.colorzilla.com/gradient-editor/，生成太极的背景
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
1.1.png
<3>用伪元素，如果你给一个东西::before，一定要给content:''，display可以不用，使用绝对定位后自动变为block。
.yingyang::before{
content:'';
width:100px;
height:100px;
border-radius:50%;
background:#000;
position:absolute;
top:50px;
left:0;
}
1.2.png
<4>采用border做太极中间的小圆圈，使太极图少些div。
1.3.png
2.给太极添加动画
<1>用animation，animation的核心就是定义关键帧，其中roll是这个动画的名字
1.4.gif
1.第一种写法，用from，to
@keyframes roll{
from{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
}
2.第二种写法，用百分比
@keyframes roll{
0%{ transform:rotate(0deg);}
100%{ transform:rotate(360deg);}
}
<2>通过transform + transition
1.5.gif
