css制作时间轴

2026-02-27 01:11:50CSS

使用Flexbox布局制作时间轴

HTML结构采用无序列表<ul>包裹多个<li>项目，每个项目包含时间节点和内容：

<ul class="timeline">
  <li>
    <div class="time">2023</div>
    <div class="content">项目启动</div>
  </li>
  <li>
    <div class="time">2024</div>
    <div class="content">版本发布</div>
  </li>
</ul>

CSS样式设置主轴为垂直方向，通过伪元素创建轴线：

.timeline {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  padding-left: 1.5rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: #3498db;
}

使用Grid布局实现响应式时间轴

采用CSS Grid实现双列交替布局，适合内容较多场景：

<div class="timeline-grid">
  <div class="event left">
    <h3>阶段一</h3>
    <p>描述内容</p>
  </div>
  <div class="event right">
    <h3>阶段二</h3>
    <p>描述内容</p>
  </div>
</div>

CSS使用grid-template-columns划分区域：

.timeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative;
}
.timeline-grid::before {
  content: "";
  position: absolute;
  width: 2px;
  background: #2c3e50;
  left: 50%;
  top: 0;
  bottom: 0;
}
.event {
  padding: 15px;
  border-radius: 6px;
  background: #f8f9fa;
}
.right { grid-column: 2; }
.left { grid-column: 1; }

纯CSS动画时间轴效果

为时间节点添加交互动画，增强视觉体验：

.time {
  position: relative;
  width: 100px;
  padding: 5px;
  background: #e74c3c;
  color: white;
  text-align: center;
  border-radius: 5px;
  transition: transform 0.3s;
}
.time::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #e74c3c;
  transform: translateY(-50%);
}
li:hover .time {
  transform: scale(1.1);
}

垂直时间轴与水平时间轴切换

通过媒体查询实现布局响应式变化：

css制作时间轴

/* 默认垂直布局 */
.timeline-horizontal {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .timeline-horizontal {
    flex-direction: row;
    justify-content: space-between;
  }
  .timeline-horizontal::before {
    width: 100%;
    height: 2px;
    left: 0;
    top: 50%;
  }
  .timeline-horizontal li {
    flex-direction: column;
    align-items: center;
  }
}