最近在學(xué)習(xí)CSS，嘗試仿制一下淘寶的物流圖。 淘寶的物流圖是非常有趣的一個設(shè)計(jì)，它通過黃色連線和灰色的狀態(tài)點(diǎn)組成了產(chǎn)品的物流狀態(tài)。

首先，讓我們看一下源代碼。我們可以將整個物流圖放在一個DIV標(biāo)簽中，然后在其中添加一組包含“狀態(tài)”和“連線”的組件。

<div class="logistics">
<div class="status">
<ul>
<li>待發(fā)貨</li>
<li>已發(fā)貨</li>
<li>運(yùn)輸中</li>
<li>已簽收</li>
</ul>
</div>
<div class="line">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
</div>

然后，我們需要添加一些CSS樣式。我們可以使用“:before”偽元素來制作每一個連線。

.logistics .line span:before {
content: "";
width: 0.625rem;
height: 0.625rem;
background-color: #F0F0F0;
position: absolute;
top: -0.312rem;
left: -0.312rem;
border-radius: 50%;
}
.logistics .line .one:before {
width: 8.68rem;
}
.logistics .line .two:before {
width: 5.68rem;
}
.logistics .line .three:before {
width: 7.68rem;
}

在這個CSS中，我們?yōu)槊總€位置制定了一個寬度，這樣我們就可以完成黃色的連線了。接下來，我們需要重置我們的狀態(tài)點(diǎn)，并將它們放在與連線相同的位置上。

.logistics .status {
width: 100%;
margin-top: 2.5rem;
display: flex;
justify-content: space-between;
padding: 0 0.625rem;
}
.logistics .status li {
position: relative;
z-index: 1;
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background: #F0F0F0;
}
.logistics .status li:before {
content: "";
position: absolute;
top: -0.285rem;
left: -0.285rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: #EEEEEE;
z-index: -1;
}

我們指定了狀態(tài)點(diǎn)的背景顏色，并使用“:before”偽元素為每個狀態(tài)點(diǎn)添加了一個灰色的圓圈。達(dá)到了與淘寶設(shè)計(jì)一致的效果。

最后，我們需要為已經(jīng)發(fā)貨的狀態(tài)添加一個黃色背景色?？紤]到它是超鏈接的樣式，我們可以通過hover來改變樣式。

.logistics .status li:nth-child(2):hover ~ .line .two:before,
.logistics .status li:nth-child(3):hover ~ .line .three:before {
background-color: #f60;
}
.logistics .status li:nth-child(2):hover ~ .line .two:after,
.logistics .status li:nth-child(3):hover ~ .line .three:after {
background-color: #f60;
}
.logistics .status li:nth-child(2):hover,
.logistics .status li:nth-child(3):hover {
background-color: #f60;
}

我們使用nth-child來指定第二個和第三個狀態(tài)點(diǎn)。然后，在組件之間添加了“~”表示它們之間存在連接。然后，我們重置了hover樣式以改變狀態(tài)點(diǎn)的背景顏色。

現(xiàn)在，我們已經(jīng)完成了這個物流圖的設(shè)計(jì)！