stato di flusso

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

15 August 2025

Codice per tavoletta grafica HTML con Javascript

14 June 2025

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

/* Animações --------------------------------------------- */
.snippet {
  position: relative;
  width: 80px;
  height: 30px;
  background-color: #1f2937;
  border: 2px solid rgba(255, 255, 255, 0.3);
  animation: flow 3s ease infinite alternate; /* Animação de base */
}

/*  @keyframes cria a animação individual */
@keyframes flow {
  0% {
    transform: translateX(0) rotate(0deg); /*  Posicionamento inicial */
    opacity: 1;
  }
  50% {
    transform: translateX(10px) rotate(180deg); /*  Posicionamento e rotação */
    opacity: 0.5; 
  }
  100% {
    transform: translateX(0) rotate(360deg); /*  Volta ao início */
    opacity: 1;
  } 
}

/* Visual */

.snippet:nth-child(1) { animation-delay: 0s; }
.snippet:nth-child(2) { animation-delay: 0.2s; }
.snippet:nth-child(3) { animation-delay: 0.4s; }
.snippet:nth-child(4) { animation-delay: 0.6s; }
.snippet:nth-child(5) { animation-delay: 0.8s; }

stato di flusso

Consigliato

Codice per tavoletta grafica HTML con Javascript

Un codice di Metehan

Un codice di slowlogic9

HTML

CSS

JS

Consigliato

Codice per tavoletta grafica HTML con Javascript

Un codice di Metehan

Un codice di slowlogic9

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS