Creazione di una valutazione a 5 cerchi fissi usando CSS/HTML

Question

Sto provando a creare un sistema di classificazione a 5 cerchi usando solo CSS e HTML (vedi immagine sotto per quello che vorrei fosse), ma non lo sono sicuro come riuscirci.

La mia idea iniziale era di fare 5 cerchi e quindi in qualche modo li usano come una maschera per un colore di sfondo che è la larghezza completa di tutti i 5 cerchi. Quindi la prima immagine ha una larghezza del 90% con un colore di sfondo di #4a494a, mentre la seconda immagine ha una larghezza del 60% e di nuovo, un colore di sfondo di #4a494a.

Questi cerchi sono fissati in modo che non sia necessaria alcuna interazione per dipingerli.

Qualcuno ha qualche idea su come potrei fare questo?

Answer 1

È possibile eseguire questa operazione utilizzando uno pseudo-elemento (.rating:after) posizionato sopra a div.rating. Lo .rating ha un il cui valore background-size determina la parte del cerchio occupata e in .rating:after c'è uno radial-gradient che produce cinque cerchi che si comportano come le maschere).

Ho usato un'animazione per mostrare come il cerchio si riempie come aumenti di background-size. È possibile impostare lo background-size richiesto utilizzando JS (o qualsiasi codice di back-end che genera l'elemento di valutazione) e quindi aggiungerlo tramite gli stili incorporati allo div.rating.

Utilizzando questo approccio, anche tra valutazioni (o valori di qualsiasi valore come 3.65, 2.25, 1.85 ecc.) È possibile gestire con facilità il semplice calcolo dello background-size richiesto. Ho aggiunto alcuni esempi nella demo.

.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

Ci dovrebbe essere un sacco di frammenti e codici là fuori per questo here è possibile trovare quello che stai cercando, e se vuoi un po 'di stile ti chiederei di controllare this out. Dal primo esempio la valutazione viene controllata dalla percentuale di larghezza style="width: 68%" su ogni div s.

Answer 3

È possibile farlo abbastanza facilmente con gli elementi pseudo: 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/

Si potrebbe semplicemente modificare la classe sull'ultimo cerchio (o ultimi due, si potrebbe aggiungere una classe none se il punteggio è inferiore a 4 cerchi)

Answer 4

Se si utilizzano alcuni css intelligente insieme ad alcuni input radio è possibile ottenere questo con puro css e html, mentre anche mantenendo interattivo.Dai un'occhiata al violino I set up: 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>

I cerchi che vedete sono le etichette per gli ingressi. L'ordine è invertito (usando float a destra), quindi puoi usare il selettore ~ per mostrare lo stato di tutti i fratelli che arrivano dopo quello selezionato. Le radio sono lì per memorizzare lo stato e dovrebbero anche consentire di inviare eventuali modifiche indietro inviando questo all'interno di un modulo. Ogni cerchio è composto da due etichette, quindi a seconda di quale metà del cerchio clicchi otterrai un punteggio diverso. I selettori odd/even spostano le due metà insieme due lo fanno apparire come un singolo cerchio.

Non esitate a chiedere se qualcosa non è chiaro!

Answer 5

Questo può essere completato con una quantità piuttosto piccola e facile di CSS per essere in grado di creare l'effetto desiderato.

.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>

Questa è una variante di Star Ratings sviluppato da css-tricks.com. Click here to read more!