<p>Rating: <span class="star-rating">
		<label for="rate-1" style="--i:1"><i class="fa-solid fa-star"></i></label>
		<input type="radio" name="rating" id="rate-1" value="1">
		<label for="rate-2" style="--i:2"><i class="fa-solid fa-star"></i></label>
		<input type="radio" name="rating" id="rate-2" value="2" checked>
		<label for="rate-3" style="--i:3"><i class="fa-solid fa-star"></i></label>
		<input type="radio" name="rating" id="rate-3" value="3">
		<label for="rate-4" style="--i:4"><i class="fa-solid fa-star"></i></label>
		<input type="radio" name="rating" id="rate-4" value="4">
		<label for="rate-5" style="--i:5"><i class="fa-solid fa-star"></i></label>
		<input type="radio" name="rating" id="rate-5" value="5">
	</span></p>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	height: 100vh;
	background-color: #0d234b;
	color: #fff;
	font-size: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.star-rating {
	white-space: nowrap;
}
.star-rating [type="radio"] {
	appearance: none;
}
.star-rating i {
	font-size: 1.2em;
	transition: 0.3s;
}

.star-rating label:is(:hover, :has(~ :hover)) i {
	transform: scale(1.35);
	color: #fffdba;
	animation: jump 0.5s calc(0.3s + (var(--i) - 1) * 0.15s) alternate infinite;
}
.star-rating label:has(~ :checked) i {
	color: #faec1b;
	text-shadow: 0 0 2px #ffffff, 0 0 10px #ffee58;
}

@keyframes jump {
	0%,
	50% {
		transform: translatey(0) scale(1.35);
	}
	100% {
		transform: translatey(-15%) scale(1.35);
	}
}