Le chuchoteur de codes

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 April 2025

Page d'accueil de Matrice Rouge

18 May 2025

* {
  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: 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: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

.code-element {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
  animation: codeDance 3s infinite alternate;
}
@keyframes codeDance {
  0% { 
    opacity: 0; 
    transform: scale(0.5); 
  }
  50% {
    opacity: 1; 
    transform: scale(1); 
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

.code-element:nth-child(1) {
  background: #F8F8F2;
  animation-delay: 0s;
} /* Light gray background for the first element */
.code-element:nth-child(2) { 
  background: #66D9EF; 
  animation-delay: 0.2s;
} 
.code-element:nth-child(3) {
  background: #AE81FF; 
  animation-delay: 0.4s;
}
.code-element:nth-child(4) {
  background: #F92672;
  animation-delay: 0.6s;
}

/* ... more elements, varying colors and animation delays ... */

Le chuchoteur de codes

Recommandé

Un code de Metehan

Page d'accueil de Matrice Rouge

Un code de Mete

HTML

CSS

JS

Recommandé

Un code de Metehan

Page d'accueil de Matrice Rouge

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS