css 垂直时间轴_使用CSS和JavaScript构建垂直时间线

css 垂直时间轴

在本教程中，我们将学习如何从头开始构建响应式垂直时间轴。 首先，我们将创建具有最少标记和CSS伪元素功能的基本结构。 然后，在向下滚动页面时，我们将使用一些JavaScript添加一些过渡效果。

让我们来了解一下我们将要构建的内容（ 在CodePen上查看较大的版本 ）。

1. HTML标记

我们将使用的标记非常简单； 一个普通的无序列表，每个列表项中都有一个div元素。 当我们沿着时间线处理事件时，我们将为每个列表项提供一个time元素以显示年份。

另外，我们将整个内容包装在带有timeline类的section元素中：

<section class="timeline">
  <ul>
    <li>
      <div>
        <time>1934</time>
        Some content here
      </div>
    </li>
    
    <!-- more list items here -->
  </ul>
</section>

这为我们提供了以下未样式化的输出：

2.添加初始CSS样式

在使用了一些基本的颜色之后（请在下面的笔中查看CSS的上部），我们将为列表项定义一些结构化CSS规则。 我们还将为这些项目的::after伪元素设置样式：

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

我删除了列表项中的内容，以使此步骤更加清晰，并为我们提供以下内容：

3.时间轴元素样式

现在让我