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

Question

我正在尝试仅使用 CSS 和 HTML 制作一个 5 圈评级系统（请参见下图了解我希望它看起来像什么），但我不是确定如何实现这一目标。

我最初的想法是制作 5 个圆圈，然后以某种方式将它们用作背景颜色的蒙版，背景颜色是所有 5 个圆圈的完整宽度。因此，第一张图片的宽度为 90%，背景颜色为 #4a494a，而第二张图片的宽度为 60%，背景颜色为 #4a494a。

这些圆圈是固定的，因此绘制它们不需要交互。

有没有人知道我该怎么做？

Answer 1

这个 here you can find what you are looking for, and if you want a bit of style I would liek you to check this 应该有很多片段和代码。从第一个示例开始，评级由每个 div 上的宽度百分比 style="width: 68%" 控制。

Answer 2

您可以使用位于 div.rating 之上的伪元素 (.rating:after) 来完成此操作。 .rating 有一个 linear-gradient，它的 background-size 决定了圆的填充量，在 .rating:after 中有一个 radial-gradient，它产生五个圆，就像口罩）。

我使用了一个动画来展示圆是如何随着 background-size 的增加而被填满的。您可以使用 JS（或任何生成评级元素的后端代码）设置所需的 background-size，然后通过内联样式将其添加到 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)
-->

Answer 3

您可以使用伪元素轻松地做到这一点： HTML

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="half"></li>
</ul>

CSS

ul {
display:block;
}

li {
display:inline-block;
list-style: none;
width:20px;
height:20px;
border-radius:50%;
background-color:orange;
overflow:hidden;
position:relative;
}

li::after {
    position:absolute;
    content: '';
    background-color:rgba(0,0,0,.5);
    display:block;
    width:20px;
    height:20px;
    top:0;
    left:0;
}


li.half::after {
    left:-10px;
}

Fiddle https://jsfiddle.net/fz2qo82m/

您只需调整最后一个圈子的 class（或最后一对，如果评分低于 4 个圈子，您可以添加 none class）

Answer 4

如果你使用一些聪明的 css 和一些 radio 输入，你可以用纯 css 和 html 实现这一点，而 甚至保持它互动。看看我设置的fiddle：https://jsfiddle.net/2rs79wsh/

#ratings {
  font-size: 0;
}
#ratings * {
  float: right;
}
#ratings input {
  display: none;
}
#ratings label {
  width: 20px;
  height: 40px;
  background-color: #ccc;
  display: inline-block;
}
#ratings label:nth-of-type(even) {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-left: 10px;
}
#ratings label:nth-of-type(odd) {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-right: 10px;
}
#ratings input:checked ~ label {
  background-color: red;
}

<div id="ratings">
  <input type="radio" id="rating-10" name="rating" value="10">
  <label for="rating-10"></label>
  ...
  <input type="radio" id="rating-1" name="rating" value="1" checked=checked>
  <label for="rating-1"></label>
</div>

您看到的圆圈是输入的标签。顺序是相反的（通过使用 float right），因此您可以使用 ~ 选择器来显示选中的所有兄弟姐妹的状态。收音机在那里存储状态，甚至应该允许您通过在表单中提交来发回任何更改。每个圆圈由两个标签组成，因此根据您单击圆圈的哪一半，您会得到不同的分数。 odd/even 选择器将两半移动到一起，使它看起来像一个圆圈。

如有不明之处欢迎随时提问！

Answer 5

只需少量且简单的 CSS 即可完成此操作，以创建您需要的效果。

.rating {
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 10px;
}
.rating > span:hover,
.rating > span:hover ~ span {
  background: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  background: gold;
  width: 20px;
  height: 20px;
  border: 1px solid gold;
  border-radius: 20px;
}

<div class="rating">
  <span></span><span></span><span></span><span></span><span></span>
</div>

这是 Star Ratings 的变体，由 css-tricks.com 开发。 Click here to read more!

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

Creating a fixed 5 circle rating using CSS/HTML

html

css

linear-gradients

radial-gradients

css-shapes