stato di flusso

944 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

16 September 2025

Flusso di dati di animazione del cuore HTML

13 December 2025

Codice HTML Canvas WebGL di Super Mario 64

15 June 2025

Un codice di securearray494

HTML

CSS

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

Consigliato

Flusso di dati di animazione del cuore HTML

Codice HTML Canvas WebGL di Super Mario 64

Un codice di securearray494

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS