ville de pépins

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

7 December 2024

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

ville de pépins

Recommandé

Un code par efficientlogic648

Un code par mironovbogdan341

Menu de navigation Coreboot

HTML

CSS

JS

Recommandé

Un code par efficientlogic648

Un code par mironovbogdan341

Menu de navigation Coreboot

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS