前言：道生一，一生二，二生三，三生万物
今天，我们来聊聊如何用 CSS 实现 太极图?
在网上可以找到很多资料，不过我强推荐一个css酷炫效果的网站，我们要实现一个 阴阳图，谷歌搜索关键词：css tricks shape
开始我们的第一种写法，谷歌搜索关键词：css3 linear gradient generator，这个是线性渐变的工具，看下面代码：
html 代码：
复制代码
css 代码：
body {
background:#444;
}
#yinyang {
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #fff 0%,#fff 50%,#000 51%,#000 100%);
position: relative;
margin:100px auto;
}
#yinyang > .one {
width:100px;
height:100px;
border-radius:50%;
background:#000;
position:absolute;
top:50px;
left:0;
}
#yinyang > .one > .circle {
width:20px;
height:20px;
border-radius:50%;
position:absolute;
left:40px;
top:40px;
background:#fff;
}
#yinyang > .two {
width:100px;
height:100px;
border-radius:50%;
background:#fff;
position:absolute;
top:50px;
right:0;
}
#yinyang > .two > .circle {
width:20px;
height:20px;
border-radius:50%;
position:absolute;
right:40px;
top:40px;
background:#000;
}
复制代码
接着，我们用第二种方式实现，优化第一种实现的写法，这里涉及到了伪类的知识::before 和 ::after，html 的结构精简了许多，看下面代码：
html 代码
复制代码
css 代码：
body {
background:#444;
}
#yinyang {
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #fff 0%,#fff 50%,#000 51%,#000 100%);
position: relative;
margin:100px auto;
}
#yinyang::before{
content:”;
width:100px;
height:100px;
border-radius:50%;
background:#000;
position:absolute;
top:50px;
left:0;
}
#yinyang::after {
content:”;
width:100px;
height:100px;
border-radius:50%;
background:#fff;
position:absolute;
top:50px;
right:0;
}
复制代码
如果你运行了上面的代码，我们需要思考一下：::before 和 ::after小圆点怎么实现呢？
::before 和 ::after 里面还能有子元素吗？
#yinyang::before::before {
content:’hi’;
}
复制代码
运行上面的代码，没有效果。这里就有一个局限，只有有一个 ::before 和 ::after。再一次想到了渐变，但渐变不太容易实现，我们可以参考 css tricks shape 的实现方法，代码如下：
body {
background:#444;
}
#yinyang {
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #fff 0%,#fff 50%,#000 51%,#000 100%);
position: relative;
margin:100px auto;
}
#yinyang::before{
content:”;
width:20px;
height:20px;
border-radius:50%;
background:#fff;
position:absolute;
top:50px;
left:0;
border:40px solid #000;
}
#yinyang::after {
content:”;
width:20px;
height:20px;
border-radius:50%;
background:#000;
position:absolute;
top:50px;
right:0;
border:40px solid #fff;
}
复制代码
接下来，我们添加上一些小动画，让它实现不停的转动～
css 代码如下：
body {
background:#444;
}
#yinyang {
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #fff 0%,#fff 50%,#000 51%,#000 100%);
position: relative;
margin:100px auto 20px;
animation-duration:3s;
animation-name:spin;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#yinyang::before{
content:”;
width:20px;
height:20px;
border-radius:50%;
background:#fff;
position:absolute;
top:50px;
left:0;
border:40px solid #000;
}
#yinyang::after {
content:”;
width:20px;
height:20px;
border-radius:50%;
background:#000;
position:absolute;
top:50px;
right:0;
border:40px solid #fff;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
复制代码
完结～感谢阅读！