水銀進度條(css)

.progress-bar {
width: 100%;
height: 10px;
background-color: #ddd;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.mercury {
background-color: #f4ad42;
width: 0;
height: 10px;
border-radius: 20px;
position: absolute;
top: 0;
left: 0;
transition: width 0.5s ease-in-out;
}

水銀進度條是一種動態(tài)效果十分炫酷的進度條，它的效果是在進度條中讓一條水銀隨著進度條的變化而流動，從而形成一種液態(tài)流動的效果。

在這個水銀進度條css中，我們首先定義了一個包括進度條和水銀的大容器.progress-bar。進度條的樣式包括一個100%的寬度、10px的高度、背景顏色以及一個20px的圓角。由于水銀是動態(tài)變化的，我們在這里設(shè)置了overflow:hidden屬性，防止水銀流出進度條容器的范圍。

接下來就是關(guān)鍵的水銀部分了.mercury，我們設(shè)置了它的背景顏色和高度與進度條一致，但是寬度為0，因為進度條還沒有開始變化。水銀的位置是絕對定位的，top和left都是0，保證了它的起點是進度條的左邊界處。為了讓水銀變化時具有一定的漸變性，我們在其樣式中加入了transition屬性，使其寬度變化產(chǎn)生一定的緩沖效果。

在實際應(yīng)用中，我們會根據(jù)實際需求動態(tài)的改變水銀的寬度，從而實現(xiàn)水銀隨著進度條的變化而流動的效果，使整個進度條更加生動有趣。