estado de flujo

Abrir en el editor Publica tu código

Recomendado

3 September 2024

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

estado de flujo

Recomendado

Rueda de la fortuna

Un código de yuhhxn

Efecto de texto desordenado

HTML

CSS

JS

Recomendado

Rueda de la fortuna

Un código de yuhhxn

Efecto de texto desordenado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS