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

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

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

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

這樣，一個簡單的進度條就完成了，具有交替顏色和動態效果。