使用css画太极,CSS画太极阴阳图

引言

CSS可以画很多图形，今天我们来画一个特殊的图形——中国古代哲学的“太极图”。

如果没有用CSS画过简单图形，建议先学习如何用border属性画三角形。

构思

步骤

1.在 html 中写一个 div 标签，class 命名为 taiChi 。

复制代码

2.假设我们想画一个宽高为100px太极图，border 的粗细为2px，由于 border 的粗细占位4px，此时宽高已经变成了96px。关于 border-radius 请查看 MDN 文档。以下代码画出一个圆形。

.taiChi {

background: #fff;

width: 96px;

height: 96px;

border-color: black;

border-style: solid;

border-width: 2px;

border-radius: 100%;

}

复制代码

3.加粗右 border，以实现填充太极图右侧为黑的状态。border-width:2px更改为border-width:2px 50px 2px 2px，效果如下图显示。

4.用 伪元素 before 和 after 画出两个小圆。定位要用 position 属性来设置两个小圆的位置，白色小圆距顶部为0，左右处于居中位置，此时 left 设置为50%。黑色小圆距底部为0，左右也处于居中位置，left 也设置为50%。宽、高、背景色和border粗细参考构思部分的设计图。

.taiChi:before {

content: "";

position: absolute;

width: 12px;

height: 12px;

background: #000;

border: 18px solid white;

top: 0;

left: 50%;

border-radius: 100%;

}

.taiChi:after {

content: "";

position: absolute;

width: 12px;

height: 12px;

background: #fff;

border: 18px solid black;

left: 50%;

bottom: 0;

border-radius: 100%;

}

复制代码

看似复杂的太极图就画好了~

5.转起来(拓展)

keyframes

animation 用法参考MDN，转起来请修改以下代码。

@keyframes spin {

from{

transform: rotate(0deg);

}

to{

transform: rotate(360deg);

}

}

.taiChi{

background:#fff;

width:48px;

height:96px;

border-color:black;

border-style:solid;

border-width:2px 50px 2px 2px;

border-radius:100%;

position:relative;

animation-duration: 3s;/*每3s转一圈*/

animation-name: spin;

animation-iteration-count: infinite;/*无限制循环*/

animation-timing-function: linear;/*匀速转动*/

}

复制代码

预览地址