怎么在css中實現一個評分星星效果

本篇文章為大家展示了怎么在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的百分比寬度占據灰色條的比例來模擬數據的百分比 。就顯得格外簡單了。

彩色星星的實現 ：

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

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

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

那怎么把普通進度條加上星星呢？我的設計專業還是給了我一絲靈感：

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

比如這樣的：

然后實際這個進度條長這樣：

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

是不是感覺又賺了個大便宜！

代碼設計上，還是和之前的進度條一樣，背景色初始為灰色，星星蓋在上邊就是五個灰色的小星星

然后當有數據值得時候， 改變彩色條 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;

  }

上述內容就是怎么在css中實現一個評分星星效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。