Создание фиксированной 5-ти круговой оценки с помощью CSS/HTML

Question

Я пытаюсь создать систему рейтинга с 5 кругами, используя только CSS и HTML (см. Ниже изображение, для чего бы мне хотелось), но я не уверен, как этого добиться.

Моя первоначальная идея состояла в том, чтобы сделать 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 (или любого внутреннего кода, который генерирует элемент рейтинга), а затем добавить его с помощью встроенных стилей в 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

Должно быть много фрагментов и кодов для этого here вы можете найти то, что ищете, и если вы хотите немного стиля, я бы попросил вас проверить this. В первом примере рейтинг контролируется по ширине style="width: 68%" на каждом div с.

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/

Вы бы просто настроить класс на последнем круге (или последнюю пару, можно добавить none класс, если рейтинг находится под 4 круга)

Answer 4

Если вы используете некоторые умные 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>

Кружки вы видите метки для входов. Порядок отменяется (с помощью 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!