Changement de réalité simulée

923 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 September 2025

Animation de la barre de chargement CSS HTML

25 June 2025

Un code de Mete

1 September 2025

Extrait de code d'animation CSS Heart

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

/* Começa a animação */
.sistema {
  width: 100px;
  height: 100px;
  background-color: #333;
  position: relative;
  animation: glitch 1s infinite; /* Ativa a animação loop */
}

@keyframes glitch {
  0% {
    background-color: #333; /* Cor original */
  }
  5% { /* Cor altera rapidamente */
    background-color: #666; 
  }
  10% {
    background-color: #333;
  }
  15% { /* Cor altera novamente */
    background-color: #999; 
  }
  20% {
    background-color: #666;
  }
  25%,
  75%,
  90%,
  95% { /* Cor retorna à original */
    background-color: #333;
  }
  100% { /* Finaliza o loop */
    background-color: #333; 
  }
}