Évaluation des émojis

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 January 2025

Indicateur de menu de navigation

9 September 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é

Une page d'accueil bizarre

Indicateur de menu de navigation

Bouton BD

HTML

CSS

JS

Recommandé

Une page d'accueil bizarre

Indicateur de menu de navigation

Bouton BD

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS