纯css实现太极图

概览

这是最终的效果

如何通过纯粹的css样式去实现这一动画呢？让我们一步一步来完成。

步骤

划分区域

我们先需要在html中绘制一个静止的太极图，这就需要将太极图划分成不同的区域，然后为每个区域添加相应的样式。
我们可以按照下图的方式来划分太极图区域：

其中，每个不同的区域以不同的颜色填充，这样一来可以看出，我们将太极图划分为了六个区域，为了方便区分，我们为每个区域添加独特的class名称，分别为：taichi–left、taichi–right、taichi–up、taichi–down、taichi–inner-up、taichi–inner-down。

绘制样式

为每个区域绘制相应的样式。
首先对于整个太极图，我们添加下列样式：

.taichi {
   
    width: 400px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 200px;
}

我们定义一个长400px，高400px的区域，为了得到一个圆形，我们添加overflow: hidden以及border-radius: 200px属性。
由于太极图内部采用绝对定位布局，因此添加position: relative。
接下来就是之前定义的六个组成部分的布局，这一部分主要解决太极图组成部分位置以及形状大小的样式问题，因此不做过多介绍。

.taichi--left {
   
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: black;
}

.taichi--right {
   
    width: 50%;
    height: 100%;
    position: absolute;
    right