用CSS实现时间轴总结

总结：大体而言是用ul结构实现，每个li元素设定一个before伪元素，作为时间轴上的圆球，在每一个li元素中新建一个div元素作为时间轴的内容。每一个div结构中设定一个after伪元素，用来作为指向时间轴的箭头。由于内容会分散在时间轴的两旁，故还应该根据nth-child()来进行相应的设置。

内容原创为此网站，我只是总结一下我这个过程。

HTML结构

<div class="timeline">
    <ul>
        <li>
            <div>
                 2002 
                 2002
            </div>
        </li>
        <li>
            <div>
                2005
            </div>
        </li>
    </ul>
</div>

CSS样式 - 时间轴

首先将每一个li元素压缩，设置背景色，使其成为时间轴的主轴，并使其居中。将其position设为relative，方便子元素根据中轴线进行变动。

.timeline ul li {
    background-color: white;
    width: 6px;
    margin: 0 auto;
    padding: 50px;
    position: relative;
}

然后用伪元素选择器after选中li之后的内容，并使其变形为圆形。

.timeline ul li:after {
    content:""; /*不重要*/
    border-radius: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 30px;
    height: 30px;
    background-color: red;
}

这样时间轴上面的一个个时间点球就完成了，（请忽略我设定的颜色，完全为了看上去比较方便）

CSS样式 - 内容框

在每一个li元素中还有一个div元素，作为时间轴的内容部分。

.timeline li div{
    position: relative; /*位置会在之后设置*/
    bottom: 0px;
    width: 400px;
    padding: 15px;
    background-color: yellow;
}

之后用伪元素before设立一个指向时间轴的箭头，在这个部分还只是一个小点，具体的形状会在之后设置。

.timeline li div::before {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style:solid;
}

CSS样式 - 内容框设置左右

根据内容框的排列将内容框依次排在时间轴的左右。

.timeline li:nth-child(odd) div {
    left: 45px;
}

.timeline li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent red transparent transparent transparent;
}

.timeline li:nth-child(even) div {
    left: -468px;
    border-width: 8px 0px 8px 16px;
    border-color: transparent transparent transparent red;
}

右边框位置的计算过程大致如下：
width(400) + padding(30) + li-width(6) + 时间轴球半径(15) + 箭头(15) + 空余部分

总结

之前也做过时间轴的，通过设置一个right部分float到右边，然后用border-left作为中间轴，但是没有这个这么好，这个方法还运用了两个我之前并不知道的伪元素before和after，也算学习到了很多。原文还有使用javascript进行交互的内容，由于我的时间轴实在是的太短了，就没有添加了，如果有兴趣可以点击原文查看。