納尼？什么星星外衣？好，直接上圖比較能說清楚：
仔細看會發現規律：可以根據百分比/分值動態改變高亮星星的個數。
分步驟圖：
這種效果，如果遇到一分一個星，沒有半星（或者有也可以，直接加一個半星的類名）的情況，還可以通過添加多個結構實現。
但是再加上這星星都要漸變效果，我當時差點找設計談談去（當然是求人家改成不漸變啊）。
不過真的去的話，顯得咱們太不專業了不是，好看的效果都實現不了，還叫什么前端。
乖乖坐下來看設計稿。
這么直接看的話，可能沒有思路，不過可以換一種方式來思考：
先想想下邊這種效果怎實現的？
怎么樣，是不是看了這個，對于星星效果的實現也有了思路了已經？！好，解散。
哈哈，不過沒有也沒關系，可以先來看一下， 這種進度條的實現。然后再從他身上找思路 （這就是我開發時的思路了，很笨很“務實”）：
結構如下:
很簡單的結構，主要核心代碼如下：
<div class="grade-progress-bg"> <div class="grade-star-gradual"> <span class="progress" style="width: 50%;"></span> </div></div>
對應效果，直接來看結構模型比較清晰：
如圖，
其中 div.grade-star-gradual 負責灰色的背景條，
span.progress負責彩色的進度條
Div.grade-progress-bg負責包裹二者，并和右側100%文案排列對齊用。
利用 span.progress的百分比寬度占據灰色條的比例來模擬數據的百分比 。就顯得格外簡單了。
彩色星星的實現 ：
利用這個思路，其實彩色進度條和彩色星星進度條就是差星星 （這也是一句廢話）
但關鍵思路點在于， 不要 把星星看做是進度條 。
也就是說星星評分和一般的進度條效果實現起來一樣。唯一的區別是有無星星。
那怎么把普通進度條加上星星呢？我的設計專業還是給了我一絲靈感：
只要在彩色進度條上邊覆蓋一個鏤空的星星圖案，看到的不就都是星星了嗎？！
比如這樣的：
然后實際這個進度條長這樣：
披上華麗的外衣后長這樣：
是不是感覺又賺了個大便宜！
代碼設計上，還是和之前的進度條一樣，背景色初始為灰色，星星蓋在上邊就是五個灰色的小星星
然后當有數據值得時候， 改變彩色條 span.progress的寬度為百分比即可實現視覺上星星個數的變化
結構上，也和進度條一致，但是為了這個鏤空星星的 “外衣”，我加了一個空結構做span的弟弟，也可以用一個偽類隨意發揮。
<div class="grade-progress-box"> <div class="grade-star-bg"> <div class="grade-star-gradual"> <span class="progress" style="width: 100%;"></span> <div class="grade-star-img bgsize"></div>//鏤空星星圖 </div> </div> <div class="grade-number grade-number1">5分</div></div>
但要保證這個 “外衣要穿著得體”，即裁剪得當，不要露怯為妙。
鏤空星星周圍的顏色要和進度條周圍的融為一體，我這里都是白色，比較好混。
最后 展示用的百分比 和分輸，配合上 vue的語法，很簡單的就可以綁定展示。
至于 從左向右的填充動態效果 ，只需要簡單的使用css 的transition，監聽width的改變即可。
普通進度條
.grade-progress-box .grade-progress-bg .grade-star-gradual #[span.progress(:style="{width: (Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(0) + '%'}")] .grade-number {{(Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(2)}}%樣式
grade-progress-box:after { content: ""; display: block; clear: both; visibility: hidden; overflow: hidden; } .grade-progress-bg { display: table-cell; vertical-align: middle; width: 4.3rem; height: .14rem; overflow: hidden; } .grade-star-gradual { height: 0.16rem; -webkit-border-radius: .15rem; border-radius: .15rem; overflow: hidden; background: #e5e5e5; } .grade-star-gradual span.progress { width: 0; height: 100%; display: block; -webkit-border-radius: .15rem; border-radius: .15rem; -webkit-transition: width 1s ease-out; -o-transition: width 1s ease-out; transition: width 1s ease-out; background: -webkit-gradient(linear, left top, right top, from(#f23f5c), to(#fea94e)); background: -o-linear-gradient(left, #f23f5c, #fea94e 100%); background: linear-gradient(to right, #f23f5c, #fea94e 100%); background: -webkit-linear-gradient(left, #f23f5c, #fea94e 100%); }星星進度條
.grade-progress-box .grade-star-bg .grade-star-gradual #[span.progress(:style="{width: (DBData.Sat/5*100).toFixed(0) + '%'}")] .grade-star-img .grade-number.grade-number1 {{DBData.Sat}}分樣式
.grade-star-bg { position: relative; display: table-cell; width: 4.46rem; height: .5rem; overflow: hidden; margin-right: .22rem; vertical-align: middle; } .grade-star-gradual { height: 0.16rem; -webkit-border-radius: .15rem; border-radius: .15rem; overflow: hidden; background: #e5e5e5; } .grade-star-bg .grade-star-gradual { height: 100%; } .grade-star-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(data:image/png;base64,) no-repeat; -webkit-background-size: 100% 100% !important; background-size: 100% 100% !important; }好了，又搞定了一個。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
