CSS之星级效果“请给个五星好评哦！”，现在生活中随处可以听到希望给对方五星好评的话语，下面看看怎么根据评分显示星级效果

前言

“请给个五星好评哦！”，现在生活中随处可以听到希望给对方五星好评的话语，下面看看怎么根据评分显示星级效果。

页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-express-test</title>
    <style>
      .star{
        background:url(static/img/ic_rating_s.png) no-repeat;
        display:inline-block;
        width: 55px;
        height: 121px;        
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <span class="star"></span>    
  </body>
</html>

不加别的样式，就显示了完整的一张图片

怎么通过评分来显示星级效果了：首先将.start的高度变为11px

.star {
    background: url(static/img/ic_rating_s.png) no-repeat;
    display: inline-block;
    width: 55px;
    height: 11px;
}

效果图为：

如果总分为100分，那么80分为4星，怎么显示该效果了，利用background-position属性，因为高度设置的是11px，则减去两个高度的位移，设置

background-position: 0 -22px;

四星效果为：

其他星级效果可以类推，项目中则可以动态的根据分数计算background-position来显示星级。项目中预置样式：

.allstar50 {
  background-position: 0 0px;
}

.allstar45 {
  background-position: 0 -11px;
}

.allstar40 {
  background-position: 0 -22px;
}

.allstar35 {
  background-position: 0 -33px;
}

.allstar30 {
  background-position: 0 -44px;
}

.allstar25 {
  background-position: 0 -55px;
}

.allstar20 {
  background-position: 0 -66px;
}

.allstar15 {
  background-position: 0 -77px;
}

.allstar10 {
  background-position: 0 -88px;
}

.allstar05 {
  background-position: 0 -99px;
}

.allstar00 {
  background-position: 0 -110px;
}

dom元素上绑定动态样式：

<span :class="starClass(movie.score)"></span>

starClass(score) {
      let scoreFloat = Number.parseFloat(score) * 10;
      let scoreInt = 5 * Number.parseInt((scoreFloat + 4) / 5) - 50;
      return "rating-star allstar" + scoreInt ;
    }