El susurrador de códigos

1,328 0 byby.createsite Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

10 January 2026

Plantilla de formulario de inicio de sesión HTML

13 June 2025

Un código de ashimadison8

30 October 2026

Cargador de juegos en pantalla completa mediante iframe en HTML y JavaScript – Versión 2

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

…