CSS实现一个转动的太极

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