Cambio de realidad simulada

766 byby.createsite

Abrir en el editor Publica tu código

Recomendado

26 June 2024

Cambio de avión

21 September 2024

Control deslizante de recorrido rotatorio

12 June 2025

Un código de Metehan

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