在Web開發(fā)中，進(jìn)度條是一個很常見的元素。在CSS2中，我們可以使用線性漸變來實現(xiàn)一個進(jìn)度條的交替顏色效果。

.progress {
width: 100%;
height: 20px;
background-color: #ccc;
}
.progress-bar {
height: 20px;
background-image: linear-gradient(to right, #ff0000 50%, #00ff00 50%)
}
/*
在.progress-bar里設(shè)置背景圖片為一個線性漸變
從左到右的方向為to right，
前50%的顏色為紅色，后50%的顏色為綠色
*/
/* 帶有動態(tài)效果的進(jìn)度條 */
.progress-bar.active {
animation: progress 3s linear forwards;
}
@keyframes progress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

上述代碼中，“.progress”表示進(jìn)度條容器的樣式，設(shè)置了進(jìn)度條的寬度、高度和背景顏色。進(jìn)度條的顏色則可以在“.progress-bar”選擇器里面設(shè)置。

同時，我們還可以加入一個動態(tài)效果，使用CSS3動畫來讓進(jìn)度條從0到100%的寬度動態(tài)變化。在“.progress-bar.active”選擇器里，我們設(shè)置了一個“progress”動畫，在3秒鐘內(nèi)讓進(jìn)度條從0%到100%。

這樣，一個簡單的進(jìn)度條就完成了，具有交替顏色和動態(tài)效果。