用纯CSS神奇旋转八卦，迷倒众生

2023-11-25 04:27:21

旋转的八卦图：探索 CSS 动画的奥秘

进入CSS的奇妙世界，我们首先要从八卦图的图形设计开始。八卦图由八个三叉戟状的符号组成，它们环绕一个圆圈，并被阴阳符号分割。为了在 CSS 中重现这个图案，我们需要使用一些技巧来创建这些形状和动画效果。

八卦图的创建

我们的八卦图由八个三叉戟形状组成，而每个三叉戟形状又由三个三角形组成。为了使用 CSS 创建这些三角形，我们将利用 CSS 中的 transform 属性和 skew() 函数。

八卦图的 CSS 代码

.八卦 {
  width: 200px;
  height: 200px;
  position: relative;
}

.八卦-三角形 {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: skew(-30deg, 30deg);
  background-color: #000;
}

.八卦-三角形--左上 {
  top: 0;
  left: 0;
}

.八卦-三角形--右上 {
  top: 0;
  right: 0;
}

.八卦-三角形--左下 {
  bottom: 0;
  left: 0;
}

.八卦-三角形--右下 {
  bottom: 0;
  right: 0;
}

这段代码创建了一个 200 像素宽高、黑色背景的 八卦 容器。在容器内，我们放置了四个 八卦-三角形，分别位于左上角、右上角、左下角和右下角。这些三角形都是通过 CSS 的 transform 属性和 skew() 函数来创建的。

旋转动画的实现

现在我们有了八卦图的基本图形，接下来要让它旋转起来。

.八卦 {
  animation: 八卦-旋转 10s infinite linear;
}

@keyframes 八卦-旋转 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}