太极图实现起来很简单，就是把多个标签利用border-radius设置成圆形，然后多个圆利用position定位重叠在一起
代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>太极图</title>
6 <style type="text/css">
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 .circlebox {
12 width: 300px;
13 height: 300px;
14 margin: 100px auto;
15 position: relative;
16 animation: move 2s linear infinite;
17 }
18 .circleblack {
19 width: 300px;
20 height: 300px;
21 background-color: black;
22 border-radius: 50%;
23 }
24 .circlewhite {
25 width: 150px;
26 height: 300px;
27 background-color: white;
28 border-top-right-radius: 150px;
29 border-bottom-right-radius: 150px;
30 position: absolute;
31 top: 0;
32 right: 0;
33 }
34 .circlebb {
35 width: 150px;
36 height: 150px;
37 background: black;
38 border-radius: 50%;
39 position: absolute;
40 top: 0;
41 left: 75px;
42 }
43 .circleww {
44 width: 150px;
45 height: 150px;
46 background: white;
47 border-radius: 50%;
48 position: absolute;
49 bottom: 0;
50 left: 75px;
51 }
52 .circlebbl {
53 width: 40px;
54 height: 40px;
55 background: black;
56 position: absolute;
57 bottom: 55px;
58 left: 130px;
59 border-radius: 50%;
60 }
61 .circlewwl {
62 width: 40px;
63 height: 40px;
64 background: #fff;
65 position: absolute;
66 top: 55px;
67 left: 130px;
68 border-radius: 50%;
69 }
70 @keyframes move {
71 from {transform: rotate(0deg);}
72 to {transform: rotate(360deg);}
73 }
74 </style>
75 </head>
76 <body>
77 <div class="circlebox">
78 <div class="circleblack"></div>
79 <div class="circlewhite"></div>
80 <div class="circlebb"></div>
81 <div class="circleww"></div>
82 <div class="circlebbl"></div>
83 <div class="circlewwl"></div>
84 </div>
85 </body>
86 </html>
