El algoritmo de sobrecarga

618 byby.createsite

Abrir en el editor Publica tu código

Recomendado

14 October 2025

Ejemplo de contenedor de animación HTML

27 June 2025

Ejemplo de página web de portafolio

12 October 2025

Ejemplo de capas de animación CSS

HTML

<body>

<div class="animation-container">
    <div class="notification-container">
      <div class="notification" style="animation-delay: 0s; left:-230px">Notificação 1</div>
      <div class="notification" style="animation-delay: 2s;left:-200px">Notificação 2</div>
      <div class="notification" style="animation-delay: 4s;left:-190px">Notificação 3 </div>
      <div class="notification" style="animation-delay: 6s;left:-165px">Notificação 4</div>
      <div class="notification" style="animation-delay: 8s;left:-150px">Notificação 5 </div>
      <div class="notification" style="animation-delay: 10s;left:-130px">Notificação 6</div>
      <div class="notification" style="animation-delay: 12s;left:-110px">Notificação 7 </div>
      <div class="notification" style="animation-delay: 14s;left:-90px"> Notificação 8 </div>
      <div class="notification" style="animation-delay: 16s;left:-70px">Notificação 9</div>
      <div class="notification" style="animation-delay: 18s;left:-50px">Notificação 10</div>
      <div class="notification" style="animation-delay: 20s;left:-30px">Notificação 11</div>
      <div class="notification" style="animation-delay: 22s;left:-10px">Notificação 12</div>

</div> 
  </div>

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

.notification {
  position: absolute; 
  width: 100px; 
  height: 100px; 
  border-radius: 10px;
  background-color: #fff;
  color: #333; 
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.animation-container .notification-container { /* Container para as notificações.*/
  position: relative; /* Garante que as notificações sejam posicionadas corretamente*/
  display: flex; /* Permite que as notificações sejam dispostas em linha*/
  gap: 10px; /* Espaçamento entre as notificações*/
  /* Animação para criar o efeito de repetição infinita e preenchimento do espaço*/
  animation: notification-loop 20s linear infinite;
}

.notification-container .notification { /* Styles para as notificações individuais*/
  margin-left: 50px;
  /* Cria um deslocamento inesperado para emular a sensação de scroll infinito*/
}

.notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #f00;
    animation: expand-red 2s linear infinite;
}

@keyframes notification-loop {
  0% {
    transform: translateX(0); /*  Posição inicial das notificações*/
  }
  20% {
    transform: translateX(100%); /*  Animação para deslocar as notificações*/
    opacity: 0.8; /* Diminui a opacidade para criar o efeito de sobreposição*/ 
  }
  40% {
    transform: translateX(200%);
    opacity: 0.8; 
  }
  60% {
    transform: translateX(300%); /*  Animação para continuar o deslocamento */
    opacity: 0.6; 
  }
  80% {
    transform: translateX(400%); 
    opacity: 0;
  }
  100% {
    transform: translateX(500%); 
    opacity: 0;  /* Redução da opacidade para desaparecer*/ 
  }
}

@keyframes expand-red {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

Recomendado

Ejemplo de contenedor de animación HTML

Ejemplo de página web de portafolio

Ejemplo de capas de animación CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS