css画太极阴阳图

前言：道生一，一生二，二生三，三生万物

今天，我们来聊聊如何用 CSS 实现 太极图?

在网上可以找到很多资料，不过我强推荐一个css酷炫效果的网站，我们要实现一个 阴阳图，谷歌搜索关键词：css tricks shape

开始我们的第一种写法，谷歌搜索关键词：css3 linear gradient generator，这个是线性渐变的工具，看下面代码：

html 代码：

<div id="yinyang">
    <div class="one">
      <div class="circle"></div>
    </div>
    <div class="two">
      <div class="circle"></div>
    </div>
  </div>

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 代码

<div id="yinyang"></div>

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);
  }
}

最后，道德经的观看链接送给大家：v.qq.com/x/page/t031…

完结～感谢阅读！