L'algorithme de débordement

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

22 November 2025

Modèle de formulaire de connexion HTML

27 October 2023

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

L'algorithme de débordement

Recommandé

Code HTML du jeu Snake

Modèle de formulaire de connexion HTML

Jeu de Tetris simple

HTML

CSS

JS

Recommandé

Code HTML du jeu Snake

Modèle de formulaire de connexion HTML

Jeu de Tetris simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS