在網(wǎng)頁設(shè)計中，進(jìn)度條是經(jīng)常使用的一個元素。而如何實現(xiàn)優(yōu)美的進(jìn)度條呢？CSS3提供了一個非常簡單的方法——使用圓角（border-radius）屬性來實現(xiàn)圓角進(jìn)度條。
.progress{
height:10px;
border-radius:5px;
overflow:hidden;
background-color:#ddd;
}
.progress-bar{
width:0%;
height:100%;
background-color:#31b0d5;
border-radius:5px;
transition:width 0.5s ease-in-out;
}以上就是我們要實現(xiàn)的進(jìn)度條的樣式。首先，我們在一個
元素中包含了一個進(jìn)度條，設(shè)置了高度和邊框半徑，并隱藏了超出進(jìn)度條的部分。
然后，我們用另一個
元素作為進(jìn)度條本身，設(shè)置了寬度、高度、邊框半徑和背景顏色，并添加了動畫效果。這個動畫實現(xiàn)了進(jìn)度條寬度的變化，是由CSS3的transition屬性實現(xiàn)的。
<div class="progress"> <div class="progress-bar"></div> </div>
最后，我們在HTML中將兩個
元素組合起來，即可完成進(jìn)度條的實現(xiàn)。
（完）
上一篇純css3點擊下拉菜單
下一篇純css3最少代碼