用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進行交互的內容，由於我的時間軸實在是的太短了，就沒有添加了，如果有興趣可以點擊原文查看。