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增加时圆圈如何填充。您可以使用JS（或生成rating元素的任何后端代码）设置所需的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 2

这可以通过非常小的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>

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

Answer 3

如果您使用一些聪明的CSS和一些radio输入，您可以使用纯css和html实现此目的，而甚至保持交互式。看看我设置的小提琴：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>

您看到的圆圈是输入的标签。顺序颠倒（通过使用向右浮动），因此您可以使用~选择器显示检查后的所有兄弟姐妹的状态。收音机可以存储状态，甚至允许您通过在表单内提交更改来发送任何更改。每个圆圈由两个标签组成，因此根据您点击的圆圈的哪一半，您将获得不同的分数。 odd / even选择器将两半移动到一起，使其看起来像一个圆圈。

随意询问是否有任何不清楚的地方！

Answer 4

这里应该有很多代码片段和代码here你可以找到你想要的东西，如果你想要一点风格我会骗你检查this 。从第一个示例开始，评分由每个style="width: 68%"的宽度百分比div控制。

Answer 5

使用psuedo元素可以很容易地做到这一点：的 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; }

<强>小提琴 https://jsfiddle.net/fz2qo82m/

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

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

5 个答案: