Le chuchoteur de codes

647 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 December 2025

Code source JavaScript du jeu Snake sur Canvas HTML

22 August 2025

Animation de notification de blob CSS

23 November 2024

Page de destination - Furniture Inc.

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: 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 ... */

Recommandé

Code source JavaScript du jeu Snake sur Canvas HTML

Animation de notification de blob CSS

Page de destination - Furniture Inc.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS