html css绘制太极,css画太极阴阳图

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

今天，我们来聊聊如何用 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);

}

}

复制代码

完结～感谢阅读！