结构分析
太极图由黑白两仪图形组成，且两仪头部中心有反色小圆。将他们的结构拆解出来，再绘制就简单很多，看下图：
可以看出太极图是由一个左右反色的大圆，两个颜色相反的中圆，以及两个颜色相反的小圆组成。中圆的半径是大圆半径的二分之一，小圆半径大约是中圆半径的三分之一。
代码实现
第一步：我们先将他的dom结构写出来
1
2
3
4
5
6
7
8
| <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代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.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;
background-image: linear-gradient(to right, white 50%, black 50%);
}
|
效果图如下：
第三步：绘制中圆
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.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;
}
|
效果图
第四步：绘制小圆
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.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;
}
|
效果图：
到此，一个太极两仪图就绘制成功了，是不是很简单。
动画
我们常听说这样一句话：“太极生两仪，两仪生四象，四象生八卦，八卦定吉凶，吉凶生大业。”
这段话其实最先出自伏羲的《易经·系辞》上传的第十一章，原文为：“是故，易有太极，是生两仪，两仪生四象，四象生八卦，八卦定吉凶，吉凶生大业。”
那么我们让太极两仪图旋转起来，看看我们能看到什么有意思的现象吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.taiji {
animation: fadeNum 90ms infinite;
}
@keyframes fadeNum {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
|
我发现，控制动画时间，我们就可以看到很有意思的图像。
想要体验的，我已将代码上传到码上掘金，可以到码上掘金体验下。
码上掘金demo体验
（未完待续。。。）
参考文章：
用纯CSS实现八卦太极图
