Livelli di animazione CSS Sfondo città

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

16 October 2025

Esempio di elemento di caricamento animato CSS

7 December 2024

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

Livelli di animazione CSS Sfondo città

Consigliato

Esempio di elemento di caricamento animato CSS

Un codice di slowlogic9

armadietto animato

HTML

CSS

JS

Consigliato

Esempio di elemento di caricamento animato CSS

Un codice di slowlogic9

armadietto animato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS