Le chuchoteur de codes

1,329 0 byby.createsite Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

10 October 2025

Conteneur de fragments d'animation CSS

18 February 2024

Bouton de confirmation

18 June 2025

Un code de ByBy.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 ... */

Comments 0

…