用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进行交互的内容，因为个人时间轴实在是的过短了，就没有添加了，若是有兴趣能够点击原文查看。