[分享]css3怎么画太极

太极图案，是中国文化的代表之一。它是象征着万物之源，道家哲学中的“无极而太极”的抽象理念。我们可以使用CSS3的动画效果来制作一个精美的太极图案。以下是制作太极图案的CSS3代码。 .taichi {...

太极图案，是中国文化的代表之一。它是象征着万物之源，道家哲学中的“无极而太极”的抽象理念。我们可以使用CSS3的动画效果来制作一个精美的太极图案。以下是制作太极图案的CSS3代码。

.taichi {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background-color: white;
}

.taichi:before, .taichi:after {
  content:"";
  display: block;
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  border-radius: 50%;
  background-color: black;
}

.taichi:before {
  left: 0;
}

.taichi:after {
  right: 0;

}

.taichi:before {
  border-right: 100px solid white;
  transform: rotate(135deg);
}

.taichi:after {
  border-left: 100px solid white;
  transform: rotate(-135deg);
}

.taichi:hover:before {
  border-color: #f9c200;
}

.taichi:hover:after {
  border-color: #d94343;
}

.taichi:hover {
  transform: rotate(360deg);
} 

以上代码中的.taichi类定义了太极图案的样式，它的尺寸是200像素*200像素，背景色为白色，边界类型是圆形。通过:before伪元素和:after伪元素，我们在太极图案中画出黑色和白色的两个相互依存的半部分。然后，使用transform属性对它们进行旋转，并用border-right和border-left设置它们的黑白色边界。当鼠标悬停在元素上时，太极图案会进行旋转，并且黑色和白色边界会分别更换为黄色和红色。

现在，我们已经学会了如何使用CSS3来创建太极图案，这非常容易。有了这个例子，你可以尝试使用CSS3来绘制更多的有趣的图案。