Webleb - Snippets de Código -

Abrir no Editor Video Publique Seu Código

Recomendado

27 November 2024

Teclado Virtual HTML CSS JavaScript

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

Recomendado

Produtos de Cartões

Marca de entrada

Teclado Virtual HTML CSS JavaScript

HTML

CSS

JS

Recomendado

Produtos de Cartões

Marca de entrada

Teclado Virtual HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS