CSS可以實現各種各樣的效果，今天我們來學習如何使用CSS實現一個時間條。

/*先定義樣式*/
.progress {
background-color: #ddd;
height: 10px;
width: 100%;
margin-bottom: 20px;
border-radius: 5px;
}
.bar {
background-color: #4CAF50;
height: 100%;
width: 0%;
border-radius: 5px;
transition: width 0.5s ease-in-out;
}
.time {
font-size: 14px;
margin-top: 5px;
text-align: right;
color: #555;
}
/*在HTML中插入代碼*/
0:00 / 3:45

以上就是實現時間條的基本樣式，我們通過修改.bar的寬度實現進度條的動態效果。