[分享]css做旋转的太极图

CSS做旋转的太极图

太极图是中华文化的重要标志，也是一种美丽的图形。那么，使用CSS如何制作这样一个图形呢？

.taichi {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 50%;
  border: 4px solid #000;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.taichi:before {
  content: ';
  position: absolute;
  width: 50%;
  height: 100%;
  background: #000;
  left: 0;
  top: 0;
  transform: rotate(180deg);
  transform-origin: 0 0;
  transition: transform 0.5s;
}

.taichi:after {
  content: ';
  position: absolute;
  width: 50%;
  height: 100%;
  background: #fff;
  right: 0;
  top: 0;
  transform: rotate(0deg);
  transform-origin: 100% 0;
  transition: transform 0.5s;
}

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

.taichi:hover:after {
  transform: rotate(-180deg);
} 

上面的代码实现了一个旋转的太极图，具体的实现方式为：

• 使用一个圆形的div元素表示太极图，设置它的样式：宽高200px、背景为白色、边框为4px的黑色边框、使用圆角50%来实现圆形、设置position属性为relative，overflow属性为hidden
• 使用:before和:after伪元素来实现太极图的黑白两色部分，宽度为父元素的一半，高度为100%，背景分别为黑色和白色，通过设置position:absolute来使它们重叠在圆形div元素中间
• 通过设置transform属性来使:before和:after伪元素旋转180度，从而达到太极图的效果
• 通过设置:hover伪类来使旋转更加流畅，使用transform和transition属性实现动画效果

通过上述代码，我们可以在网页中轻松实现一个太极图，让网页更加美丽和有趣。