效果预览
http://90-designer.com/demo/css3/rating.html

下载
rating.zip

HTML结构

<span class="rating">
  <input id="rating5" type="radio" name="rating" value="5">
  <label for="rating5">5</label>
  <input id="rating4" type="radio" name="rating" value="4">
  <label for="rating4">4</label>
  <input id="rating3" type="radio" name="rating" value="3">
  <label for="rating3">3</label>
  <input id="rating2" type="radio" name="rating" value="2">
  <label for="rating2">2</label>
  <input id="rating1" type="radio" name="rating" value="1">
  <label for="rating1">1</label>
</span>

通过单选框的checked判断选中状态以及获取评分值。需要注意是的,评分值是由高到低进行排序,然后通过css进行逆向排序。

CSS样式
首先我们对rating的容器进行设置:

.rating:not(old){
  overflow: hidden;
  vertical-align: bottom;
  display: inline-block;
  width: 100px;
  height: 20px;
}

使用:not选择器的原因是为了在低版本浏览器中进行降级显示:在不支持:not选择器的低版本浏览器中,使用默认radio状态进行展示。
:not(selector)选择器是匹配非指定元素/选择器的每个元素,但是:not(old)实际上并没有指定任何元素,所以默认命中了当前的clssname,下同。

接着我们将radio隐藏。

.rating:not(old) > input{
  opacity: 0;
  margin-right: -100%;
}

将label进行倒序排序,并设置背景为未选中心形。

.rating:not(old) > label{
  position: relative;
  display: block;
  float: right;
  background: url('star.svg');
  background-size: contain;
}

通过:before伪类选择器,设置背景为选中后心形,并将透明度设为0。

.rating:not(old) > label:before{
  display: block;
  opacity: 0;
  content: '';
  width: 20px;
  height: 20px;
  background: url('star-fill.svg');
  background-size: contain;
  transition: opacity 0.2s linear;
}

使用:hover以及radio的checked来设置选中状态

.rating:not(old) > label:hover:before,
.rating:not(old) > label:hover ~ label:before,
.rating:not(:hover) > :checked ~ label:before{
  opacity: 1;
}