Livelli di animazione CSS Sfondo città

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

24 May 2025

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

Riavvio di Windows

un codice di metehan

Menu di navigazione Coreboot

HTML

CSS

JS

Consigliato

Riavvio di Windows

un codice di metehan

Menu di navigazione Coreboot

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS