Webleb - Snippet di Codice - città dei glitch

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;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 29px;
  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);
}
.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; 
}

/* CSS Snippet */
.codigo {
  background-color: #000;
} .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 {
  /* Main Effect */
  width: 300px; height: 300px;
  background-color: rgba(255, 255, 255, 0.05);
  perspective: 1000px;
}

.block {
  position: absolute;
  width: 50px; 
  height: 50px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
    opacity: 0;
    animation: blockAnimation 3s infinite linear;
}

.block:nth-child(1) { left: 50px; top: 50px; transform: rotateY(0deg); animation-delay: 0.2s;background-color: rgba(255, 255, 255, 0.8);  }
.block:nth-child(2) { left: 150px; top: 50px; transform: rotateY(45deg); animation-delay: 0.3s;  }
.block:nth-child(3) { left: 50px; top: 150px; transform: rotateY(90deg); animation-delay: 0.4s; background-color: rgba(255, 255, 255, 0.9);  }
.block:nth-child(4) { left: 250px; top: 50px; transform: rotateY(135deg); animation-delay: 0.5s;  }
.block:nth-child(5) { left: 50px; top: 250px; transform: rotateY(180deg); animation-delay: 0.6s; background-color: rgba(255, 255, 255, 0.7); }
.block:nth-child(6) { left: 150px; top: 250px; transform: rotateY(225deg); animation-delay: 0.7s;  background-color: rgba(255, 255, 255, 0.6);  }
.block:nth-child(7) { 
  left: 250px; 
  top: 150px; 
  transform: rotateY(270deg); 
  animation-delay: 0.8s; 
  background-color: rgba(255, 255, 255, 0.5); 
}

@keyframes blockAnimation {
   0% { transform: translateZ(0) rotateY(0deg); opacity: 0; } 
   100% { transform: translateZ(100px) rotateY(360deg); opacity: 1; }
}

città dei glitch

Consigliato

Trasformazione dei dati

Livelli di animazione CSS Sfondo città

HTML

CSS

JS

Consigliato

Trasformazione dei dati

Livelli di animazione CSS Sfondo città

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS