纯HTML,CSS制作一个太极图

1,创建一个父元素container,利用绝对定位position: absolute;放置于页面中央
<style>.container{ width: 400px; height: 400px; border: 1px solid black; border-radius: 50%; position: absolute; top: 25%; left: 35%; }</style>
<div class="container"></div>

2,在这个container里面存放两个盒子div，其主要作用是区分container里面的两个半圆.left和.right
<div class="left"></div>
<div class="right"></div>
3,两个半圆要用到浮动将他们放置在父元素container中
.container .left{ width: 50%; height: 100%; float: left; background-color: black; }

完成其中的一个，下一个完全可以复制粘贴进去
4,接下来才是重头戏，分别在.left和.right里面各放置一个盒子div.代码如下:
<div class="left"> <div class="left_box"> </div> </div> <div class="right"> <div class="right_box"> </div> </div>
完成上面的操作，我们还要继续给.left_box和.right_box添加一个绝对定位position: absolute;
.container .left .left_box{ width: 50%; height: 50%; border-radius: 50%; background-color: white; position: absolute; top: 0; left: 0; right: 0; bottom: 200px; margin: auto; }
做到这一步基本就是这个样子了，当然上面代码还缺一个模块。都是运用同一个方法做的.下面上图:

5,现在基本完成了太极图，但是还缺那么一点。但时，我运用了伪类元素::after来制作最后两个小圆,当然也有更好的方法。
.container .left .left_box::after{ position: absolute; content: ""; top: 70px; bottom: 0; left: 70px; right: 0; width: 20%; height: 20%; background-color: black; border-radius: 50%; display: block; }
相同的道理，我们复制上面的代码。换一下类名就行了，当然还要略微的调试。上图:

6，做到这里就差不多了，我们再让它自己动起来就行了。最后一步我是运用了animation来制作的，这个animation要将它放在最大的一个父元素container里面。代码如下:
<style>.container{ width: 400px; height: 400px; border: 1px solid black; border-radius: 50%; position: absolute; top: 25%; left: 35%; animation: mytj 1s infinite; }</style>
做完这一步后，就到了这个太极图的灵魂了。不说多的，上代码你们看。
@keyframes mytj{ 0%{ transform: rotate(360deg); }10%{ transform: rotate(324deg); }20%{ transform: rotate(288deg); }30%{ transform: rotate(252deg); }40%{ transform: rotate(216deg); }50%{ transform: rotate(180deg); }60%{ transform: rotate(144deg); }70%{ transform: rotate(108deg); }80%{ transform: rotate(72deg); }90%{ transform: rotate(36deg); }100%{ transform: rotate(0deg); } }
然后，就可以动了。 一个纯小白自己做的，各位看看就行了。嘿嘿