Star selection - YarTechnology

Back

Live Code Preview

Code Sections

HTML Code

<div class="rating">
  <input value="5" name="rating" id="star5" type="radio" />
  <label title="5 stars" for="star5">
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgOne"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgTwo"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <div class="ombre"></div>
  </label>

  <input value="4" name="rating" id="star4" type="radio" />
  <label title="4 stars" for="star4">
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgOne"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgTwo"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <div class="ombre"></div>
  </label>

  <input value="3" name="rating" id="star3" type="radio" />
  <label title="3 stars" for="star3">
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgOne"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgTwo"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <div class="ombre"></div>
  </label>

  <input value="2" name="rating" id="star2" type="radio" />
  <label title="2 stars" for="star2">
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgOne"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgTwo"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <div class="ombre"></div>
  </label>

  <input value="1" name="rating" id="star1" type="radio" />
  <label title="1 star" for="star1">
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgOne"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <svg
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#000000"
      fill="none"
      viewBox="0 0 24 24"
      height="35"
      width="35"
      xmlns="http://www.w3.org/2000/svg"
      class="svgTwo"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <div class="ombre"></div>
  </label>
</div>

CSS Code

.rating {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.3rem;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.rating input {
  display: none;
}

.rating label .svgOne {
  stroke: #ccc;
  fill: rgba(255, 217, 0, 0);
  transition:
    stroke 0.5s ease,
    fill 0.5s ease;
}

.rating label .svgTwo {
  position: absolute;
  top: -1px;
  fill: gold;
  stroke: rgba(255, 217, 0, 0);
  opacity: 0;
  transition:
    stroke 0.5s ease,
    fill 0.5s ease,
    opacity 0.5s ease;
}

.rating label {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  transition: all 0.5s ease;
}

/* Étoiles sélectionnées ou survolées */
.rating label:hover .svgOne,
.rating label:hover ~ label .svgOne {
  stroke: gold;
}

.rating input:checked ~ label .svgOne {
  stroke: #cccccc00;
}

.rating input:checked ~ label .svgTwo {
  transform: rotateX(0deg) rotateY(0deg) translateY(0px);
  opacity: 1;
  animation: displayStar 0.5s cubic-bezier(0.75, 0.41, 0.82, 1.2);
}

@keyframes displayStar {
  0% {
    transform: rotateX(100deg) rotateY(100deg) translateY(10px);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg) translateY(0px);
  }
}

.ombre {
  background: radial-gradient(
    ellipse closest-side,
    rgba(0, 0, 0, 0.24),
    rgba(0, 0, 0, 0)
  );
  width: 30px;
  height: 8px;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}

/* Étoiles sélectionnées ou survolées */
.rating label:hover .ombre,
.rating label:hover ~ label .ombre {
  opacity: 0.3;
}

.rating input:checked ~ label .ombre {
  opacity: 1;
}

/* Animation de secousse uniquement au hover */
.rating label:hover .svgTwo:hover {
  animation:
    chackStar 0.6s ease-out,
    displayStar none 1s;
}

@keyframes chackStar {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  80% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}