或者后面灰色的條多帶帶，灰色的圓多帶帶；紅色圓多帶帶，紅色條多帶帶；

JS控制吧畢竟css3不支持ie8

要兼容ie8，那就用js的動畫來做，解法也比較多，常規的可以設置顏色條容器的寬度來實現。

灰色的進度條切下做為背景，橙色部分也切下100%情況下的長度。在布局的時候，灰色條作為背景，橙色蓋在灰色的上面，然后用JS控制橙色的寬度變化就可以了，再設定一下js動畫的完成時間，進度條的展開速度就隨你控制了。畢竟要兼容IE8,就只能用JS做了。望采納。

js + css3 進度條動畫百度一下有很多這種教程了 關鍵詞是 css3 動畫 進度條

后面的灰的可以用一個背景，然后紅色的切成每段當做背景（左 中），以用js控制div的寬度

總結

以上是生活随笔為你收集整理的这个效果怎么做？？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。