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

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

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

分步驟圖：

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

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

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

 乖乖坐下來看設計稿。

 

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

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

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

 

 

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

結構如下:

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

<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.7、2.3分這樣的半塊的半塊展示不好，

比如：

再比如：

該多了不多，該少了不少，左右不准有沒有。

 后來覺得是自己星星間距的問題，先說下星星間距和大小的關系：

 

然后就左右調試星星，出了這么多稿：

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

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

我發現規律是

在半星的左邊，比如1.2、1.3、1.4分就會不夠，得出的寬度百分比小於正確展示時的百分比。

而半星的右邊，如1.6、1.7、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); //個位數

排除掉整星和整半星的情況（寬度值是整數的：比如10、20、30...100）,直接展示，因為不需要處理。

if (unit !== 0) {

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

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

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

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

else {//十位數為奇數

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

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

總結規律，抽象邏輯。

 

於是我整理到了計算屬性中，每次數據返回后，根據分值計算寬度值，再根據寬度值調整到最佳展示值。bug可以關掉了。

計算屬性的函數代碼：

Sati: function(val) {
      // 如果模十得0，表示整數，半星剛好，正常顯示
      // 如果十位數為偶數 左半顆星星
      // 個位數：
      // 為2 需要+ 4
      //  4 + 3
      //  6 + 2
      //  8 + 1
      // 如果十位數為奇數 右半顆星星
      // 個位數：
      //  為2 需要- 1
      //  4 - 2
      //  6 - 3
      //  8 - 4
      // this.Satisfaction = parseFloat(Number(this.gradeData[1]) / 5 * 100).toFixed(2);
      var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2);
      var decade = parseInt(res / 10); //十位數
      var unit = parseInt(res % 10); //個位數
      console.log("原值", res,"十位數", decade, "個位", unit);
      if (unit !== 0) {
        // 不是正好半顆星或一顆星的情況
        // console.log("非半星");
        if (decade % 2 == 0) {
          //十位數為偶數
          // console.log("十位數為偶數");
          switch (unit) {
            case 2:
              unit += 4;
              break;
            case 4:
              unit += 3;
              break;
            case 6:
              unit += 2;
              break;
            case 8:
              unit += 1;
              break;
          }
        } else {
          //十位數為奇數
          // console.log("十位數為奇數");
          switch (unit) {
            case 2:
              unit -= 1;
              break;
            case 4:
              unit -= 2;
              break;
            case 6:
              unit -= 3;
              break;
            case 8:
              (unit -= 4);
              break;
          }
        }
        res = "" + decade + unit;
      }
      console.log("結果", res);
      return res;
    }

 

另外，平時用文字整理自己的思路真的有助於自己寫邏輯。

我這個函數的邏輯就是先整理出下邊這種現象描述，再照着編程的。使得思路很清晰不會編程的中途迷茫。

這也是在智能社視頻中跟着blue老師學到的一招，安利一下智能社。

 

個人學習理解和總結，很多不足還請指正~

 

聲明：

　　請尊重博客園原創精神，轉載或使用圖片請注明：

　　博主：xing.org1^

　　出處：http://www.cnblogs.com/padding1015/