Évaluation des émojis

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 May 2025

Découvrez le message de la lettre d'amour

HTML

<!DOCTYPE html>
<html lang="es" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="graph-container" >
    <div class="half-donut">
        <div class="slice">
             <i class="fa-regular fa-face-grimace"></i>
        </div>
        <div class="slice">
            <i class="fa-regular fa-face-frown"></i>
        </div>
        <div class="slice">
            <i class="fa-regular fa-face-meh"></i>
        </div>
        <div class="slice">
            <i class="fa-regular fa-face-smile"></i>
        </div>
        <div class="slice">
            <i class="fa-regular fa-face-grin-hearts"></i>
        </div>
    </div>
    <div class="marker"></div>
</div>

</body>
</html>

CSS

.graph-container {
  --size: 20rem;
  --stroke-size: calc(var(--size)/5);
  --rating: 0;
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  animation: 1s animateRating linear;
}
.graph-container *, .graph-container *::before, .graph-container *::after {
  box-sizing: border-box;
}

.half-donut {
  width: var(--size);
  height: calc(var(--size)/2);
  border-radius: var(--size) var(--size) 0 0;
  position: relative;
  overflow: hidden;
  filter: drop-shadow(0 0 0.3rem #0005);
}

.slice {
  --stroke-color: #000;
  --rotate: 0deg;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--size) var(--size) 0 0;
  border: var(--stroke-size) solid var(--stroke-color);
  box-sizing: border-box;
  border-bottom: none;
  transform-origin: 50% 100%;
  background: #0000;
  transform: rotate(calc(var(--rotate)));
}
.slice .fa-regular {
  font-size: 2rem;
  color: #000;
  position: absolute;
  left: -2.5rem;
  top: 2.5rem;
  --emo-rotate: 90deg;
  transform: rotate(var(--emo-rotate));
}
.slice:hover {
  opacity: 0.8;
  cursor: pointer;
}
.slice:nth-child(1) {
  --stroke-color: #d72e2c;
  --rotate: calc(36deg * (1 - 1) );
}
.slice:nth-child(1) .fa-regular {
  --emo-rotate: calc(-36deg * (1 - 1));
}
.slice:nth-child(2) {
  --stroke-color: #ff6259;
  --rotate: calc(36deg * (2 - 1) );
}
.slice:nth-child(2) .fa-regular {
  --emo-rotate: calc(-36deg * (2 - 1));
}
.slice:nth-child(3) {
  --stroke-color: #f19c4b;
  --rotate: calc(36deg * (3 - 1) );
}
.slice:nth-child(3) .fa-regular {
  --emo-rotate: calc(-36deg * (3 - 1));
}
.slice:nth-child(4) {
  --stroke-color: #68ca6f;
  --rotate: calc(36deg * (4 - 1) );
}
.slice:nth-child(4) .fa-regular {
  --emo-rotate: calc(-36deg * (4 - 1));
}
.slice:nth-child(5) {
  --stroke-color: #509d55;
  --rotate: calc(36deg * (5 - 1) );
}
.slice:nth-child(5) .fa-regular {
  --emo-rotate: calc(-36deg * (5 - 1));
}

.marker {
  position: absolute;
  z-index: 1;
  transform: translateX(-50%);
  --round-size: calc(var(--size) / 10);
  --round-o-size: calc(var(--round-size)* 0.32);
  width: var(--round-size);
  height: var(--round-size);
  left: 50%;
  bottom: 0;
  border: var(--round-o-size) solid #fff;
  border-radius: 50%;
  --turn: calc(45deg + (36 * calc(var(--rating)* 1deg)) );
  transform: translate(-50%, 50%) rotate(var(--turn));
  transform-origin: 50% 50%;
  transition: 0.2s linear;
}
.marker::before {
  content: "";
  position: absolute;
  border: calc(var(--round-size) / 3) solid transparent;
  border-right: calc(var(--size)* 0.4) solid #FFF;
  left: 0%;
  bottom: 0;
  transform: translate(-100%, 50%) rotate(-45deg);
  transform-origin: 100% 50%;
  filter: drop-shadow(calc(var(--round-size) / -10) 0 0.2rem #0008);
}

@keyframes animateRating {
  50% {
    --rating: 5;
  }
}
#range {
  -webkit-appearance: none;
  width: 20rem;
  height: 0.5rem;
  background: #90CAF9;
  outline: none;
  opacity: 0.7;
  border-radius: 0.5rem;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

#range:hover {
  opacity: 1;
}

#range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #2962FF;
  border: 0.5rem solid #FFF;
  cursor: pointer;
}

#range::-moz-range-thumb {
  width: 2rem;
  height: 2rem;
  background: #2962FF;
  cursor: pointer;
}

body {
  background: #262638;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  gap: 5rem;
}

Évaluation des émojis

Recommandé

forme 3D

Bouton d'autodestruction

Découvrez le message de la lettre d'amour

HTML

CSS

JS

Recommandé

forme 3D

Bouton d'autodestruction

Découvrez le message de la lettre d'amour

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS