Calques d'animation CSS pour arrière-plan de la ville

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 December 2024

Tableau de bord d'administration

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

Calques d'animation CSS pour arrière-plan de la ville

Recommandé

Un code par staticbug455

Animation de texte CSS

Tableau de bord d'administration

HTML

CSS

JS

Recommandé

Un code par staticbug455

Animation de texte CSS

Tableau de bord d'administration

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS