css太极图会旋转

CSS太极图是一种非常有意思的图形，它可以用CSS来实现。而且最令人惊奇的是，这个图形还可以旋转！

// 构建太极图的HTML

  



// CSS 样式
.taiji-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.taiji {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background-color: black;
  border: 1px solid white;
}

.taiji::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 50%;
  border-radius: 50%;
  background-color: white;
}

.taiji::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 50%;
  border-radius: 50%;
  background-color: black;
}

/* 这是关键：添加旋转动画 */
.taiji {
  animation: rotate 3s linear infinite;
}

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

我们在如上HTML代码和CSS样式中，构建出太极图并定义旋转动画。通过添加在.taiji元素上的「animation」属性，我们让太极图旋转起来，并且其旋转的方向是顺时针的。最后的「infinite」则是表示这个动画可以永远循环下去。

如此轻易的就添加了旋转的功效，是不是很神奇？CSS在实现这样的图形时可以让许多人领略到其强大的一面。