Vant 评分组件 - 星星渐变颜色实现教程

要将星星变为渐变颜色，您可以使用 CSS 的渐变属性来实现。下面是一个示例代码：

HTML:

<div class='rating'>
  <span class='star'></span>
  <span class='star'></span>
  <span class='star'></span>
  <span class='star'></span>
  <span class='star'></span>
</div>

CSS:

.rating {
  width: 200px;
  height: 40px;
  position: relative;
  background: linear-gradient(to right, #ffcc00, #ff0000);
}

.star {
  display: inline-block;
  width: 20%;
  height: 100%;
  background: linear-gradient(to right, #fff, #ffcc00);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.star:before {
  content: '★';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 24px;
  color: #ffcc00;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}

.star:hover:before,
.star:hover ~ .star:before {
  opacity: 1;
}

在这个例子中，我们创建了一个包含五个星星的评分组件。星星的背景颜色是从黄色渐变到红色的。当鼠标悬停在星星上时，星星的颜色会从透明变为黄色。您可以根据需要调整渐变颜色和其他样式。