css案例 - 評分效果的星星✨外衣

時間 2019-11-07

標籤 css 案例評分效果星星外衣欄目 CSS 简体版

原文原文鏈接

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

仔細看會發現規律：能夠根據百分比/分值動態改變高亮星星的個數。css

分步驟圖：前端

這種效果，若是遇到一分一個星，沒有半星（或者有也能夠，直接加一個半星的類名）的狀況，還能夠經過添加多個結構實現。vue

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

不過真的去的話，顯得我們太不專業了不是，好看的效果都實現不了，還叫什麼前端。web

乖乖坐下來看設計稿。編程

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

先想一想下邊這種效果怎實現的？函數

怎麼樣，是否是看了這個，對於星星效果的實現也有了思路了已經？！好，解散。學習

哈哈，不過沒有也不要緊，能夠先來看一下，這種進度條的實現。而後再從他身上找思路（這就是我開發時的思路了，很笨很「務實」）：

結構以下:

很簡單的結構，主要核心代碼以下：

<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的百分比寬度佔據灰色條的比例來模擬數據的百分比。就顯得格外簡單了。

彩色星星的實現：

利用這個思路，其實彩色進度條和彩色星星進度條就是差星星（這也是一句廢話）

但關鍵思路點在於，不要把星星看作是進度條。

也就是說星星評分和通常的進度條效果實現起來同樣。惟一的區別是有無星星。

那怎麼把普通進度條加上星星呢？個人設計專業仍是給了我一絲靈感：

只要在彩色進度條上邊覆蓋一個鏤空的星星圖案，看到的不就都是星星了嗎？！

好比這樣的：

黑色地方都是png透明圖，在看圖軟件就是黑色的

換個軟件截圖，這樣看明白吧，後邊得馬賽克就是png得透明底

而後實際這個進度條長這樣：

披上華麗的外衣後長這樣：

是否是感受又賺了個大便宜！

代碼設計上，仍是和以前的進度條同樣，背景色初始爲灰色，星星蓋在上邊就是五個灰色的小星星

而後當有數據值得時候，改變彩色條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的改變便可。

2019-04-01 13:03:55補

後來有讀者找上門問我，說仍是看不明白鏤空圖得原理，這裏我把我倆得截圖貼一下，方便你們理解：

感謝這個小夥伴得疑問，補足一下我原來文章描述得不足~

結構：

普通進度條

.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;
  }

好了，又搞定了一個。

==============================$_$==================================

2018-10-30 11:45:22 補充：

後來又遇到一個相似的評分星星效果，可是還用這個方法就死活不那麼盡如人意了：

首先說不那麼使人頭痛的設計稿上：

此次與上次不一樣的是，背景不是純白色的純色，而是半透明。

透出來的底色有時候是白色，又時候又是藍色的話，就不可能還用上一種作法的一個純背景+鏤空圖覆蓋了。

因而此次我用了兩張圖疊加，以下圖：

底圖是默認的灰色星星，而後彩色星星覆蓋住灰色的，彩色被包裹在一個div中，控制div的寬度以達到漏出多少彩色星星的效果。

具體結構就是這樣：

兩個span分別是灰色星星和彩色星星作背景，中間div的寬度根據數據計算伸縮並超出隱藏。加之trasition的動畫，同樣達到了上邊的那種效果。

自測、1.5, 2.5, 3分都完美展現。

好景不長，測試發現1.七、2.3分這樣的半塊的半塊展現很差，

好比：

再好比：

該多了很少，該少了很多，左右不許有沒有。

後來以爲是本身星星間距的問題，先說下星星間距和大小的關係：

而後就左右調試星星，出了這麼多稿：

後來好不容易這種半塊又半塊的星搞定了後發現，整星又不行了。我崩潰到一鍵還原了，沒有截圖。

實在沒辦法了，在整星的基礎上研究解決方法吧。由於你只有站在好的方向上再努力纔會離成功更近：

我發現規律是

在半星的左邊，好比1.二、1.三、1.4分就會不夠，得出的寬度百分比小於正確展現時的百分比。

而半星的右邊，如1.六、1.七、1.8計算出的寬度值又會多於實際應該展現的寬度值。

這種一個計算方式須要處理兩種狀況的狀況，再純用css就沒法解決了。

因而我請除了js大哥出面處理：

在計算到應該展現的寬度值的基礎上，

var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2);

求取出寬度的個位數和十位數作準備:

var decade = parseInt(res / 10); //十位數
var unit = parseInt(res % 10); //個位數

排除掉整星和整半星的狀況（寬度值是整數的：好比十、20、30...100）,直接展現，由於不須要處理。

if (unit !== 0) {

剩下的狀況就是，在其餘半半星中，判斷寬度值的十位數，

十位數爲偶數的是半星左邊的那種實際寬度值小於應該展現寬度值的狀況，咱們就讓他的實際寬度值再稍微加一點。

if (decade % 2 == 0) {//十位數爲偶數

而十位數爲奇數的，實際寬度值大於應該展現寬度值，那就讓實際寬度值減一點。

else {//十位數爲奇數

可是都加或者都減相同的數量嗎？固然不是。

仔細觀察你又會發現，半星左邊個位數的值越小，他須要加的越大，個位數值越大，須要加的卻越小。而半星右邊更好相反。

總結規律，抽象邏輯。

因而我整理到了計算屬性中，每次數據返回後，根據分值計算寬度值，再根據寬度值調整到最佳展現值。bug能夠關掉了。

計算屬性的函數代碼：

 1 Sati: function(val) {
 2       // 若是模十得0，表示整數，半星恰好，正常顯示
 3       // 若是十位數爲偶數 左半顆星星
 4       // 個位數：
 5       // 爲2 須要+ 4
 6       //  4 + 3
 7       //  6 + 2
 8       //  8 + 1
 9       // 若是十位數爲奇數 右半顆星星
10       // 個位數：
11       //  爲2 須要- 1
12       //  4 - 2
13       //  6 - 3
14       //  8 - 4
15       // this.Satisfaction = parseFloat(Number(this.gradeData[1]) / 5 * 100).toFixed(2);
16       var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2);
17       var decade = parseInt(res / 10); //十位數
18       var unit = parseInt(res % 10); //個位數
19       console.log("原值", res,"十位數", decade, "個位", unit);
20       if (unit !== 0) {
21         // 不是正好半顆星或一顆星的狀況
22         // console.log("非半星");
23         if (decade % 2 == 0) {
24           //十位數爲偶數
25           // console.log("十位數爲偶數");
26           switch (unit) {
27             case 2:
28               unit += 4;
29               break;
30             case 4:
31               unit += 3;
32               break;
33             case 6:
34               unit += 2;
35               break;
36             case 8:
37               unit += 1;
38               break;
39           }
40         } else {
41           //十位數爲奇數
42           // console.log("十位數爲奇數");
43           switch (unit) {
44             case 2:
45               unit -= 1;
46               break;
47             case 4:
48               unit -= 2;
49               break;
50             case 6:
51               unit -= 3;
52               break;
53             case 8:
54               (unit -= 4);
55               break;
56           }
57         }
58         res = "" + decade + unit;
59       }
60       console.log("結果", res);
61       return res;
62     }