今天完成一个css太极八卦的css效果，用一个div实现css动画效果，并用before和after伪类来实现。
分析过程
首先画一个div
<div id="taiji"></div>
#taiji {
width: 192px;
height: 96px;
background: #eee;
border-color: black;
border-style: solid;
border-width: 0px 0px 96px 0px;
border-radius: 100%;
position: relative;
}
其次画出两个伪类
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 36px solid black;
border-radius: 100%;
width: 24px;
height: 24px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: black;
border: 36px solid #eee;
border-radius:100%;
width: 24px;
height: 24px;
}
下面是效果图
css分割.png
最后将两个div合并成一个div，就可以得到完整的太极了
完整css.png
下面我们加点特效，给这个div一个shadow效果和动画效果。
这就需要box-shadow和keyframes了，box-shadow一共有四个参数，分别：水平距离，竖直距离，模糊程度和颜色，我们只需要模糊程度和颜色，所以前两个参数给0，代码是box-shadow:0 0 1.5em black;;接下来我们在给太极动画效果，代码是animation: roate 10s infinite linear; 和 @keyframes roate {0% {transform: rotateZ(0)}100% {transform: rotateZ(360deg) } }。
最后我们就完成了完整的css太极和动画。
太极和动画.png
预览效果：https://xiaozhi1.github.io/css-taiji/
参考文档
1.https://css-tricks.com/examples/ShapesOfCSS/
2.https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
3.https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
4.https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
