0

Кто то может подсказать, как можно реализовать плавный переход, через прозрачность неполной звезды. Сейчас этот переход резкий, хочу чтобы при оценке в 95% или 9,5 последняя, пятая звезда, была прозрачная на 75%, а остальные обычные. В зависимости от оценки изменялся внешний вид. Оценку думаю хранить в data-rating Может кто то подскажет, или направит как бы это можно было решить максимально просто?

.star-ratings-sprite {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
  font-size: 0;
  height: 21px;
  line-height: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 110px;
  margin: 0 auto;
}
.star-ratings-sprite-rating {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
  background-position: 0 100%;
  float: left;
  height: 21px;
  display: block;
}
<div class="star-ratings-sprite">
  <span style="width:92%" class="star-ratings-sprite-rating"></span></div>

3

1 ответ 1

1

Можно использовать вот это как вариант.

.star-ratings-sprite {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
  font-size: 0;
  height: 21px;
  line-height: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 110px;
  margin: 0 auto;
  position: relative;
}

.star-ratings-sprite-rating {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
  background-position: 0 100%;
  float: left;
  height: 21px;
  display: block;
}

.star-ratings-sprite-rating-o {
  float: left;
  height: 21px;
  display: block;
  opacity: 0.5;
  position: absolute;
  right: 0;
  background-color: white;
}
<div class="star-ratings-sprite">
  <span style="width:92%" class="star-ratings-sprite-rating"></span>
  <span style="width:20%" class="star-ratings-sprite-rating-o"></span>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.