Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

28 February 2025

<!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;
}

Consigliato

Un codice di securearray494

Un codice di Metehan

Piani Bot (Home Page)

HTML

CSS

JS

Consigliato

Un codice di securearray494

Un codice di Metehan

Piani Bot (Home Page)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS