结构分析
太极图由黑白两仪图形组成，且两仪头部中心有反色小圆。将他们的结构拆解出来，再绘制就简单很多，看下图：
可以看出太极图是由一个左右反色的大圆，两个颜色相反的中圆，以及两个颜色相反的小圆组成。中圆的半径是大圆半径的二分之一，小圆半径大约是中圆半径的三分之一。
代码实现
第一步：我们先将他的dom结构写出来
<div class="taiji">
<div class="middle-circle top-circle">
<div class="small-circle black-circle"></div>
</div>
<div class="middle-circle bottom-circle">
<div class="small-circle white-circle"></div>
</div>
</div>
第二步：将左右反色的大圆绘制出来，css代码如下
/* 大圆 */
.taiji {
width: 300px;
height: 300px;
border-radius: 150px;
/* 水平垂直居中 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 0 15px #999;
/* 用css3渐变可以只写一个圆得到两个半圆(不同色) */
background-image: linear-gradient(to right, white 50%, black 50%);
}
效果图如下：
第三步：绘制中圆
/* 中圆 */
.taiji .middle-circle {
width: 150px;
height: 150px;
border-radius: 75px;
position: absolute;
left: 75px;
}
/* 第一个中圆-白色 */
.taiji .middle-circle.top-circle{
top: 0;
background-color: #fff;
}
/* 第二个中圆-黑色 */
.taiji .middle-circle.bottom-circle{
top: 150px;
background-color: #000;
}
效果图
第四步：绘制小圆
/* 小圆 */
.small-circle {
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
left: 50px;
top: 50px;
}
/* 第一个小圆-黑色 */
.small-circle.black-circle {
background-color: #000;
}
/* 第二个小圆-白色 */
.small-circle.white-circle {
background-color: #fff;
}
效果图：
到此，一个太极两仪图就绘制成功了，是不是很简单。
动画
我们常听说这样一句话：“太极生两仪，两仪生四象，四象生八卦，八卦定吉凶，吉凶生大业。”
这段话其实最先出自伏羲的《易经·系辞》上传的第十一章，原文为：“是故，易有太极，是生两仪，两仪生四象，四象生八卦，八卦定吉凶，吉凶生大业。”
那么我们让太极两仪图旋转起来，看看我们能看到什么有意思的现象吧。
.taiji {
animation: fadeNum 90ms infinite;
}
/* 通过@keyframes规则设置动画的旋转动作 */
@keyframes fadeNum {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
我发现，控制动画时间，我们就可以看到很有意思的图像。
想要体验的，我已将代码上传到码上掘金，可以到码上掘金体验下。
（未完待续。。。）
参考文章：
