水平时间轴css代码_使用CSS和JavaScript构建水平时间线

水平时间轴css代码

在上一篇文章中 ，我向您展示了如何从头开始构建响应式垂直时间轴。 今天，我将介绍创建相关的水平时间线的过程。

与往常一样，要初步了解我们将要构建的内容，请查看相关的CodePen演示（请查看较大的版本以获得更好的体验）：

我们有很多内容需要介绍，所以让我们开始吧！

1. HTML标记

标记与我们为垂直时间轴定义的标记相同，除了以下三点：

• 我们使用有序列表而不是无序列表，因为在语义上更正确。
• 还有一个额外的列表项（最后一个）为空。 在下一部分中，我们将讨论原因。
• 还有一个额外的元素（即.arrows ）负责时间轴导航。

这是必需的标记：

<section class="timeline">
  <ol>
    <li>
      <div>
        <time>1934</time>
        Some content here
      </div>
    </li>
     
    <!-- more list items here -->
    
    <li></li>
  </ol>
  
  <div class="arrows">
    <button class="arrow arrow__prev disabled" disabled>
      <img src="arrow_prev.svg" alt="prev timeline arrow">
    </button>
    <button class="arrow arrow__next">
      <img src="arrow_next.svg" alt="next timeline arrow">
    </button>
  </div>
</section>

时间轴的初始状态如下所示：

2.添加初始CSS样式

为了简单起见，在这里省略了一些基本的字体样式，颜色样式等之后，我们指定了一些结构性CSS规则：

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #fff;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}

在这里最重要的是，您会注意到两件事：

• 我们为列表分配较大的顶部和底部填充。 再次，我们将在下一节中解释为什么会发生这种情况。
• 正如您将在以下演示中注意到的那样，由于列表的width: 100vw ，其父级的overflow-x: hidden ，因此，此时我们无法看到所有列表项。 这有效地“掩盖”了列表项。 但是，由于有了时间轴导航，我们以后才能浏览所有项目。

有了这些规则，这就是时间轴的当前状态（没有任何实际内容，以使情况保持清楚）：

3.时间轴元素样式

至此，我们将对div元素（从现在开始将它们称为“时间轴元素”）进行样式设置，这些元素属于列表项以及它们的::before伪元素。

另外，我们将使用:nth-child(odd)和:nth-child(even) CSS伪类来区分奇数和偶数div的样式。

以下是