太极旋转的秘密：探索CSS动画的优雅之美

2024-01-28 12:35:10

在数字世界的浩瀚汪洋中，CSS（层叠样式表）是一股不可忽视的力量，它赋予了网页设计令人难以置信的灵活性。从简单的文本格式化到复杂的动画效果，CSS拥有无穷无尽的可能性。今天，我们将深入探讨一个 faszinierend 的CSS技巧——旋转的太极图，揭开其优雅之美背后的奥秘。

太极图是道教和中国武术中常见的象征，代表着相反力量的和谐统一。传统上，它是由两个互补的形状绘制而成：一个代表阴性的黑色半圆和一个代表阳性的白色半圆。这两个半圆相互缠绕，形成一个动态的平衡。

借助CSS动画，我们能够赋予太极图生命，让它在数字屏幕上旋转起来。这不仅是一个视觉上的盛宴，更是一个见证CSS强大功能的绝佳机会。

构建太极图

第一步是使用HTML创建一个空的div容器。这个容器将作为太极图的画布。接下来，使用CSS为这个div设置宽高和背景色。为了创建一个圆形，我们将使用border-radius属性，将其值设置为50%。

<div id="taiji"></div>

#taiji {
  width: 200px;
  height: 200px;
  background-color: #000;
  border-radius: 50%;
}

划分阴阳

现在，我们需要将太极图划分为阴阳两个部分。为此，我们将使用伪元素::before和::after。我们将为这两个伪元素设置不同的背景色，以表示阴和阳。

#taiji::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

#taiji::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

旋转太极图

最后，我们使用CSS动画让太极图旋转起来。为此，我们将为#taiji设置animation属性。我们将使用transform属性来控制太极图的旋转角度。

#taiji {
  animation: spin 2s linear infinite;
}

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