stato di flusso

839 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

28 December 2024

Una directory alternativa della home page

23 August 2025

Modello HTML per la pagina di accesso turca

10 January 2025

Un codice di Mikeykun

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

Una directory alternativa della home page

Modello HTML per la pagina di accesso turca

Un codice di Mikeykun

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS