持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情
据说太极图里面的文化博大精深，有着一生二，二生三，三生万物的道理，虽然我不怎么懂，要让它转起来就会发现非常神奇，那今天我们就来用 css 画一个太极图吧。
首先我们先来看一下效果，鼠标移上去让它转起来看看。
移入和移除的效果是不一样的哟，建议反复观看：
接下来就开始讲解实现思路和代码了，真的草鸡简单，就几行代码。
1. 思路
首先看看太极图的构成，首先是黑白两个部分平分，然后内部会有两个圆，一个黑圆，一个白圆，黑白圆里面又有一个小的反色圆，总共就五个部分组成。
组成成分我用红框已经标出来了，如下图，现在看着框框标着乱没关系，马上讲解了就清楚了。
网上都是伪元素+定位啥的来实现，代码又多又复杂，今天咱们用渐变来实现，简单又好看。
2. 代码
2.1 结构
<div></div>
没想到吧，就这么简单，我一个div就可以了。
2.2 样式
先给div设置一下宽高，然后使用线性渐变来实现黑白两个部分：
div {
width: 300px;
height: 300px;
background-image: linear-gradient(#fff 50%, #000 50%);
}
这样我们就得到了黑白两个部分，线性渐变之前我写过一篇文章有讲过，这里就不多说了，有兴趣的可以看看：渐变是真的好玩，真是一个有趣的特性
当然上面的div还不够圆，加个border-radius: 50%;就好了蛮。
接下来我们需要实现的是内部的两个圆，一个黑圆，一个白圆，这里我们使用的是radial-gradient，直接上代码：
div {
width: 300px;
height: 300px;
border-radius: 50%;
background-image:
radial-gradient(50% 50% at 25% 50%, #fff 50%, transparent 50%),
radial-gradient(50% 50% at 75% 50%, #000 50%, transparent 50%),
linear-gradient(#fff 50%, #000 50%);
}
ok，现在的效果就有点像模像样了：
这里的知识点是径向渐变radial-gradient，现在就来讲讲它是怎么用的。
2.3 radial-gradient
径向渐变是从中心向外扩散的渐变，它的形式语法是：
radial-gradient([shape || size] at [position], [color-stops])
其中shape是形状，size是大小，position是位置，color-stops是颜色。
慢慢分析：
[shape || size]：是形状或者大小，只能二选一shape：形状，有circle和ellipse两种，分别是圆形和椭圆形，默认是ellipse。size：大小，有closest-side、closest-corner、farthest-side、farthest-corner四种，分别是最近边、最近角、最远边、最远角，默认是farthest-corner；当然除了关键字还可以是其他数值单位，比如px、em等。
at [position]：是位置，是指渐变的中心点，可以是关键字top、right、bottom、left、center，也可以是其他数值单位，比如px、em等。[color-stops]：是颜色，接收的是颜色值和百分比，比如red 50%，表示颜色是红色，百分比是50%。
通过上面的分析，我们可以知道，radial-gradient可以有下面的几种形式：
div {
background-image: radial-gradient(red, blue),
radial-gradient(red 50%, blue, green 80%),
radial-gradient(circle, red 50%, blue 50%),
radial-gradient(circle at top, red, blue),
radial-gradient(circle at top left, red 50%, blue 50%),
radial-gradient(50px at 50px 50px, red 50%, blue 50%);
/* 还有很多组合，要学会举一反三 */
}
2.4 两个圆的位置
现在来分析我上面写的代码，我们可以看到，我写了两个个radial-gradient，分别是：
div {
background-image:
radial-gradient(50% 50% at 25% 50%, #fff 50%, transparent 50%),
radial-gradient(50% 50% at 75% 50%, #000 50%, transparent 50%);
}
radial-gradient(50% 50% at 75% 50%, #000 50%, transparent 50%)代表的是黑色的圆;
50% 50% at 75% 50%对应的就是[size] at [position]，size是50% 50%代表这个圆是外面的大圆的一半大小，position是75% 50%代表这个圆往左偏移了75%，往下偏移了50%。
radial-gradient(50% 50% at 25% 50%, #fff 50%, transparent 50%)代表的是白色的圆，道理和上面是一样的，只不过这个圆是往左偏移了25%；
这里有一个问题就是为啥是75%和25%，拿白圆来说应该是0才对，这是因为这个position对应的是径向的中心点，而不是想我们用position时那样，是相对于自身的位置，所以这里的0是指自身的中心点，而不是左上角。
2.5 两个圆的颜色
#fff 50%, transparent 50%颜色只用了两个，分别是#fff和transparent，因为我们需要的是纯色的圆，所以肯定不能让颜色有过渡，所以这里的关键点在于后面的50%这个参数。
第一个#fff 50%代表白色的圆的#fff要占50%剩余的地方再看你看着处理；
transparent 50%代表透明色要从50%开始占剩余的地方，这样就可以保证白色的圆是纯色的了。
黑色的圆也是一样的道理，就不多说了。
2.6 内部的小圆
有了上面的基础，我们可以如法炮制，来画一个内部的小圆，代码如下：
div {
background-image:
radial-gradient(10% 10% at 75% 50% ,#fff 50%, transparent 50%),
radial-gradient(10% 10% at 25% 50% ,#000 50%, transparent 50%),
radial-gradient(50% 50% at 25% 50% ,#fff 50%, transparent 50%),
radial-gradient(50% 50% at 75% 50% ,#000 50%, transparent 50%),
linear-gradient(#fff 50%, #000 50%);
}
上面就是完整的太极图的代码了，可以看到小圆和上面写的大圆代码是一样的，只是改动的size，其他的都是一样的，所以这里就没什么好讲解的了。
至于为什么position也没变，上面已经说过了，这里的position是径向渐变的中心点，而不是我们平时用position时的相对位置。
3. 让它转起来
现在我们已经画好了太极图，但是它是静止的，我们要让它转起来，这里我就发现掘金的头像，鼠标移上去就会转起来，这里直接CV工程师上线：
div:hover {
transform: rotate(666turn);
transition-delay: 1s;
transition-property: all;
transition-duration: 59s;
transition-timing-function: cubic-bezier(.34,0,.84,1);
}
nice，转起来了，但是鼠标移开就立马停止了，我还想让它多转一会，这个就简单了，直接在div上加个transition: all 60s;就可以了。
完整代码和示例在文章开头，真不错呀~~~
4. 总结
这里就是我用CSS画太极图的全部过程了，其实也没什么难度，只要你有一点点的CSS基础，就可以轻松的完成这个任务，开始酸了。
