Changement de réalité simulée

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 June 2025

Iframe réactif avec navigation d'aperçu de l'appareil

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

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

Changement de réalité simulée

Recommandé

Un code de Metr

Iframe réactif avec navigation d'aperçu de l'appareil

Jeu de pile

HTML

CSS

JS

Recommandé

Un code de Metr

Iframe réactif avec navigation d'aperçu de l'appareil

Jeu de pile

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS