Rating Star Input

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="star-input">
  <span class="star-input__star"></span>
  <span class="star-input__star"></span>
  <span class="star-input__star"></span>
  <span class="star-input__star"></span>
  <span class="star-input__star"></span>
</div>

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
  font-size: 0;
}
.star-input__star {
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: #33333d;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: star-twinkle 2.4s ease-in-out infinite;
}
.star-input__star:nth-child(1) { animation-delay: 0s; }
.star-input__star:nth-child(2) { animation-delay: 0.12s; }
.star-input__star:nth-child(3) { animation-delay: 0.24s; }
.star-input__star:nth-child(4) { animation-delay: 0.36s; }
.star-input__star:nth-child(5) { animation-delay: 0.48s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.star-input__star:hover,
.star-input__star:hover ~ .star-input__star {
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  transform: scale(1.15);
  animation: none;
  opacity: 1;
}