css制作八卦图

八卦图，又称为太极图，是中华文化中的重要图案之一。在Web开发中，我们可以使用CSS制作出一个精美的八卦图。

首先，我们需要准备一个HTML结构。我们可以使用一个div元素来包裹八卦图，然后再添加两个div元素作为阴阳两极，如下所示：

接下来，我们通过CSS来设置样式。我们可以先设置包裹八卦图的div元素的样式：

.bagua {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  border: 1px solid #000;
}

上面的样式代码中，我们设置了div元素的宽度、高度、position属性和圆角半径，使其呈现一个圆形的外观。

然后，我们需要设置阴阳两极的样式。我们可以通过:before和:after伪元素来实现，如下所示：

.yin:before,.yang:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
}

.yin:after,.yang:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
}

上面的样式代码中，我们通过设置:before和:after伪元素的样式，让其呈现出黑白相间的效果，同时形成阴阳两极的图案。

最后，我们需要给阴阳两极添加旋转的动画效果。我们可以通过@keyframes关键字来定义旋转的动画效果，如下所示：

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.yin {
  animation: rotate 6s linear infinite;
}

.yang {
  animation: rotate 4s linear infinite;
}

上面的样式代码中，我们定义了一个名为“rotate”的动画，让阴阳两极都产生旋转的效果。其中，阴和阳的旋转速度和方向是不同的。

到此为止，一个精美的八卦图就制作完成了！我们可以将HTML和CSS代码放在一个HTML文件中，然后在浏览器中查看效果。