Ratinax_cold-rabbit-43.html

<div class="radio-input">
  <input
    value="value-1"
    name="value-radio"
    id="value-1"
    type="radio"
    class="star s1"
  />
  <input
    value="value-2"
    name="value-radio"
    id="value-2"
    type="radio"
    class="star s2"
  />
  <input
    value="value-3"
    name="value-radio"
    id="value-3"
    type="radio"
    class="star s3"
  />
  <input
    value="value-4"
    name="value-radio"
    id="value-4"
    type="radio"
    class="star s4"
  />
  <input
    value="value-5"
    name="value-radio"
    id="value-5"
    type="radio"
    class="star s5"
  />
</div>

<style>
/* From Uiverse.io by Ratinax  - Tags:  */
.radio-input {
  display: flex;
  scale: 0.15;
  transform: rotate(180deg);
}

.star {
  margin: 1em;
  appearance: none;
  --color: white;
  border-left: 6.4721359549996em solid transparent;
  border-right: 6.4721359549996em solid transparent;
  border-bottom: 4em solid var(--color);
  transform: rotate(0deg);
  cursor: pointer;
}

.star:before {
  content: "";
  border-left: 6.4721359549996em solid transparent;
  border-right: 6.4721359549996em solid transparent;
  border-top: 4em solid var(--color);
  position: absolute;
  left: -6.4721359549996em;
  transform: rotate(108deg);
}

.star:after {
  content: "";
  border-left: 6.4721359549996em solid transparent;
  border-right: 6.4721359549996em solid transparent;
  border-top: 4em solid var(--color);
  position: absolute;
  left: -6.4721359549996em;
  transform: rotate(253deg);
}

.radio-input > .star:hover ~ .star,
.radio-input > .star:hover,
.radio-input > .star:checked ~ .star,
.radio-input > .star:checked {
  --color: yellow;
}

.radio-input > .star:checked ~ .star,
.radio-input > .star:checked {
  animation: rotate 0.5s linear forwards;
  transform: rotate(360deg);
  transition: transform 0.3s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    scale: 1.5;
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>