Mudança de realidade simulada

556 byby.createsite

Abrir no Editor Publique Seu Código

Recomendado

10 July 2025

Efeito de foco de botão animado em CSS

23 September 2025

Contêiner de animação CSS: formas e movimento

29 June 2025

Um código de Mete

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

Recomendado

Efeito de foco de botão animado em CSS

Contêiner de animação CSS: formas e movimento

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS