ville de pépins

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 March 2025

Un code par andrej.social.network

8 September 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 andrej.social.network

Hacker de connexion

Un code par ashimadison8

HTML

CSS

JS

Recommandé

Un code par andrej.social.network

Hacker de connexion

Un code par ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS