CSS3可按進度變色的進度條

今天是周末，看到一款利用CSS3實作的進度條應用，覺得非常棒，就将它分享給大家，并且将這款CSS3進度條的實作過程大緻整理了一下，實作的關鍵是根據目前的進度需要能改變進度條的背景顔色。下面是效果圖：

<a href="http://www.html5tricks.com/demo/css3-progress-bar-with-color/index.html" target="_blank">檢視線上示範</a>

從外觀上來看，這款進度條還是比較優雅的，有jQuery UI的風格。下面我們來看看具體實作的過程。主要是兩部分代碼，HTML和CSS3。

HTML代碼：

主要由兩部分，一部分是選擇進度的按鈕，點選按鈕即會讓進度條跳轉到相應進度的位置并顯示對應的背景顔色。

還有一部分HTML則是進度條的容器，進度條就在這個容器中發生各種變化。

CSS3代碼：

上面的CSS代碼是對進度條的樣式進行定義，并采用漸變的CSS3屬性來讓進度條的背景顔色更加時尚。

接下來是關鍵的按鈕選擇進度的CSS代碼：

用上面的CSS3代碼就可以取代js來實作點選選中的事件，非常友善。