<div class="rating-stars">
	<input type="radio" name="rating" id="rs0" checked><label for="rs0"></label>
	<input type="radio" name="rating" id="rs1"><label for="rs1"></label>
	<input type="radio" name="rating" id="rs2"><label for="rs2"></label>
	<input type="radio" name="rating" id="rs3"><label for="rs3"></label>
	<input type="radio" name="rating" id="rs4"><label for="rs4"></label>
	<input type="radio" name="rating" id="rs5"><label for="rs5"></label>
	<span class="rating-counter"></span>
</div>

body {
	margin: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #11114e;
	background: radial-gradient( circle at 50% 100%, #1d659f, #11114e);	
}

body * {
    box-sizing: border-box;
}

.rating-stars {
	display: block;
	width: 50vmin;
	padding: 1.75vmin 10vmin 2vmin 3vmin;
	background: linear-gradient(90deg, #ffffff90 40vmin, #fff0 40vmin 100%);
	border-radius: 5vmin;
	position: relative;
}

.rating-counter {
	font-size: 5.5vmin;
    font-family: Arial, Helvetica, serif;
    color: #9aacc6;
    width: 10vmin;
    text-align: center;
    background: #0006;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border-radius: 0 5vmin 5vmin 0;
    line-height: 10vmin;
}

.rating-counter:before {
	content: "0";
	transition: all 0.25s ease 0s;	
}



input { display: none; }

label {
	width: 5vmin;
	height: 5vmin;
	background: #000b;
	display: inline-flex;
	cursor: pointer;
	margin: 0.5vmin 0.65vmin;
	transition: all 1s ease 0s;	
	clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}

label[for=rs0] {
	display: none;
}

label:before {
	width: 90%;
	height: 90%;
	content: "";
	background: orange;
	z-index: -1;
	display: block;
	margin-left: 5%;
	margin-top: 5%;
	clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
	background: linear-gradient(90deg, yellow, orange 30% 50%, #184580 50%, 70%, #173a75 100%);
	background-size: 205% 100%;
	background-position: 0 0;
}

label:hover:before {
	transition: all 0.25s ease 0s;		
}

input:checked + label ~ label:before {
	background-position: 100% 0;
	transition: all 0.25s ease 0s;	
}

input:checked + label ~ label:hover:before {
	background-position: 0% 0
}





#rs1:checked ~ .rating-counter:before {
	content: "1";
}

#rs2:checked ~ .rating-counter:before {
	content: "2";
}

#rs3:checked ~ .rating-counter:before {
	content: "3";
}

#rs4:checked ~ .rating-counter:before {
	content: "4";
}

#rs5:checked ~ .rating-counter:before {
	content: "5";
}

label + input:checked ~ .rating-counter:before {
	color: #ffab00 !important;
	transition: all 0.25s ease 0s;
}





label:hover ~ .rating-counter:before {
	color: #9aacc6 !important;
	transition: all 0.5s ease 0s;	
	animation: pulse 1s ease 0s infinite;
}

@keyframes pulse {
	  50% { font-size: 6.25vmin; }
}

label[for=rs1]:hover ~ .rating-counter:before {
	content: "1" !important;
}

label[for=rs2]:hover ~ .rating-counter:before {
	content: "2" !important;
}

label[for=rs3]:hover ~ .rating-counter:before {
	content: "3" !important;
}

label[for=rs4]:hover ~ .rating-counter:before {
	content: "4" !important;
}

label[for=rs5]:hover ~ .rating-counter:before {
	content: "5" !important;
}


input:checked:hover ~ .rating-counter:before {
	animation: none !important;
	color: #ffab00 !important ;
}








/*** INITIAL ANIMATION - Not Necessary ***/
/*** I want to make a loop here ***/
/*
label + input + label:before {
    animation: start 0.5s ease 0s 1;
}

.rating-stars:hover label + input + label:before {
    animation: none;
}

label[for=rs2]:before {
	animation-delay: 0.1s;
}

label[for=rs3]:before {
	animation-delay: 0.2s;
}

label[for=rs4]:before {
	animation-delay: 0.3s;
}

label[for=rs5]:before {
	animation-delay: 0.4s;
}

@keyframes start {
	10%, 90% { background-position: 0% 0; }
}

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.