流体旋转时间轴

当涉及到创建流体旋转时间轴时，CSS的`animation`属性可以派上用场。下面是一个简单的示例，展示如何使用CSS创建一个流体旋转的时间轴：

HTML结构：

<div class="timeline">
  <div class="timeline-item">
    <div class="content">
      <h3>事件1</h3>
      <p>事件1的描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="content">
      <h3>事件2</h3>
      <p>事件2的描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="content">
      <h3>事件3</h3>
      <p>事件3的描述</p>
    </div>
  </div>
</div>

CSS样式：

.timeline {
  position: relative;
  margin: 50px auto;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.timeline-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #ccc;
  transform: translateX(-50%);
  animation: timeline-rotate 10s linear infinite;
}

.content {
  position: absolute;
  top: 50%;
  left: 100%;
  padding: 10px;
  background-color: #f1f1f1;
  transform: translateY(-50%);
}

@keyframes timeline-rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

在上面的示例中，我们创建了一个`.timeline`容器来包含时间轴的内容。`.timeline-item`代表每个时间轴项目，使用绝对定位来放置在容器中的中心位置。`.content`是时间轴项目的内容，它被绝对定位在时间轴项目的右侧。

通过`animation`属性，我们定义了一个名为`timeline-rotate`的关键帧动画，使时间轴项目沿着中心旋转。这个动画将在10秒内线性无限循环播放。