使用CSS/HTML创建固定的5圈评级

Question

我正在尝试使用CSS和HTML制作一个5圈评级系统(参见下面的图片,我希望它看起来像),但我不知道如何实现这一目标.

我最初的想法是制作5个圆圈然后以某种方式使用它们作为背景颜色的掩模,这是所有5个圆圈的完整宽度.所以第一张图片的宽度为90%,背景颜色为#4a494a,而第二张图片的宽度为60%,背景颜色为#4a494a.

这些圆是固定的,因此不需要任何相互作用来绘制它们.

有没有人对我如何做到这一点有任何想法？

Answer 1

您可以使用位于.rating:after顶部的伪元素()来完成此操作div.rating.该.rating有linear-gradient它的background-size多少决定了圆的充满并.rating:after有一个radial-gradient产生五周界行为像口罩).

我用动画来显示圆圈如何随着background-size增加而被填充.您可以background-size使用JS(或生成rating元素的任何后端代码)设置所需的内容,然后通过内联样式将其添加到div.rating.

使用这种方法,即使在评级之间(或任何值的评级,如3.65,2.25,1.85等),只需计算所需数量即可轻松处理background-size.我在演示中添加了一些示例.

.rating {
  position: relative;
  height: 50px;
  width: 250px;
  background: linear-gradient(to right, black, black);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 0px 100%;
}
.rating.auto-anim {
  animation: fill-circle 5s ease infinite;
}
.rating:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: radial-gradient(20px at center, transparent 7.5px, beige 9px);
  background-position: 0px 0px;
  background-size: 50px 100%;
  border: 1px solid;
}
@keyframes fill-circle {
  to {
    background-size: 100% 100%;
  }
}

<div class='rating auto-anim'></div>
<div class='rating' style="background-size: 50px 100%;"></div>     <!-- rating of 1 -->
<div class='rating' style="background-size: 75px 100%;"></div>     <!-- rating of 1.5 -->
<div class='rating' style="background-size: 121.25px 100%;"></div> <!-- rating of 2.25 -->
<div class='rating' style="background-size: 228.75px 100%;"></div> <!-- rating of 4.75 -->
<div class='rating' style="background-size: 177.25px 100%;"></div> <!-- rating of 3.65 -->
<div class='rating' style="background-size: 80.25px 100%;"></div>  <!-- rating of 1.85 -->

<!-- 

Background Size Calculation Logic: Each circle is only 15px wide with 17.5px gap on either side 

1 rating = 50px (for 1 circle)
1.5 rating = 50px (for 1 circle) + 17.5px (gap before 2nd circle on left) + 7.5px (.5 of 15px circle)
2.25 rating = 100px (for 2 circles) + 17.5px (gap before 3rd circle on left) + 3.75px (.25 of 15px circle)
4.75 rating = 200px (for 4 circles) + 17.5px (gap before 5th circle on left) + 11.25px (.75 of 20px circle)
3.65 rating = 150px (for 3 circles) + 17.5px (gap before 4th circle on left) + 9.75px (.65 of 20px circle)
1.85 rating = 50px (for 1 circle) + 17.5px (gap before 2nd circle on left) + 12.75px (.85 of 20px circle)
-->