納尼？什么星星外衣？好，直接上圖比較能說清楚：

仔細看會發(fā)現(xiàn)規(guī)律：可以根據(jù)百分比/分值動態(tài)改變高亮星星的個數(shù)。

分步驟圖：

這種效果，如果遇到一分一個星，沒有半星（或者有也可以，直接加一個半星的類名）的情況，還可以通過添加多個結(jié)構(gòu)實現(xiàn)。

但是再加上這星星都要漸變效果，我當時差點找設計談談去（當然是求人家改成不漸變啊）。

不過真的去的話，顯得咱們太不專業(yè)了不是，好看的效果都實現(xiàn)不了，還叫什么前端。

乖乖坐下來看設計稿。

這么直接看的話，可能沒有思路，不過可以換一種方式來思考：

先想想下邊這種效果怎實現(xiàn)的？

怎么樣，是不是看了這個，對于星星效果的實現(xiàn)也有了思路了已經(jīng)？！好，解散。

哈哈，不過沒有也沒關(guān)系，可以先來看一下， 這種進度條的實現(xiàn)。然后再從他身上找思路 （這就是我開發(fā)時的思路了，很笨很“務實”）：

結(jié)構(gòu)如下:

很簡單的結(jié)構(gòu)，主要核心代碼如下：

對應效果，直接來看結(jié)構(gòu)模型比較清晰：

如圖，

其中 div.grade-star-gradual 負責灰色的背景條，

span.progress負責彩色的進度條

Div.grade-progress-bg負責包裹二者，并和右側(cè)100%文案排列對齊用。