Évaluation des émojis

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 October 2024

<!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é

Goku contre Végéta

Un code par securearray494

SITE WEB BANQUE ACCEUIL

HTML

CSS

JS

Recommandé

Goku contre Végéta

Un code par securearray494

SITE WEB BANQUE ACCEUIL

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS