Capas de animación CSS Fondo de ciudad

634 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

13 May 2025

Página de inicio de sesión de Roblox HTML CSS

30 May 2023

Formulario de inicio de sesión/registro con CSS

9 September 2024

Botón de borrar animado

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}
.layer1 {  
  z-index: 1;
  position: absolute;
   width: 150px; height: 150px;
   animation: flicker 1s infinite;
   background-color: #333;
   border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);  
  opacity: 0.7;

}
@keyframes flicker {
  0% { opacity: 0.7; }
  50% { opacity: 0.1; }
  100% { opacity: 0.7; } 
}

.layer2 {  
  z-index: 2;
  position: absolute; 
  width: 200px; height: 200px;
  animation: blurShift 2s infinite; 
  background-color: #444;
   clip-path: circle(50% at 10% 10%);

top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
} 
@keyframes blurShift {
  0% { filter: blur(0px);transform: rotate(-30deg);  }
  25% { filter: blur(10px);transform: rotate(-45deg); }
  50% { filter: blur(0px);transform: rotate(-30deg); }
  75% { filter: blur(5px);transform: rotate(-35deg); }
  100% { filter: blur(0px);transform: rotate(-30deg); }   
}

.layer3 {  
  z-index: 3;
  position: absolute; 
  width: 100%; height: 100%;
  animation: glitchRain 1s infinite;
  background-color: #555;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);

top: 0; left: 0;
} 
@keyframes glitchRain {
  0% {transform:matrix(1,0,0,1,0,0); }
  25% {transform:matrix(1.05,0,0,1,10,10);  }  
  50% {transform:matrix(1,0,0,1,0,0); }  
  75% {transform:matrix(0.95,0,0,1,0,0); }  
  100% {transform:matrix(1,0,0,1,0,0); }   
   
}

/*Animação da cidade a distância com "efeito de borrão" */
.city { /* define a classe de animacao para a "cidade" */
 
    position: absolute; /* define a posição como absoluta */
    left: 0; /* define a posição inicial na esquerda */
    width: 100%;
    background-color: #fafafa;
    filter: blur(5px); /* adiciona um efeito de blur */
    z-index: 4; /* define a ordem de sobreposição (a cidade está acima das camadas anteriores)*/
 }
@media (min-width: 375px){
.city{ /* Define as regras para telas a partir de 375px */
  height: 100%;
  transform: translateX(-100vw); /* Posicione o fundo da cidade fora da tela */
  animation: cityscapeFade 10s linear infinite; /* Adiciona uma animação de deslocamento da cidade */
} 
@keyframes cityscapeFade {

0% { opacity: 0.8; transform: translateX(0); } /* Transformação inicial */
  50% { opacity: 0.5; transform: translateX(-100%); } /* Transformação no meio da animação */
  100% { opacity: 0.8; transform: translateX(0); } /* Transformação final */
} }

.codigo { 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px; 
  border-radius: 8px;
  white-space: pre-line;
  text-align: left; 
  line-height: 1.6; 
  max-height: 50%;
  width: 100%; 
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3); 
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }      
.animation-container 
{  position: absolute; 
}

Recomendado

Página de inicio de sesión de Roblox HTML CSS

Formulario de inicio de sesión/registro con CSS

Botón de borrar animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS