danza de formas interactiva

1,323 byby.createsite

Abrir en el editor Publica tu código

Recomendado

29 January 2026

Lienzo HTML del juego de carreras de karts con JavaScript

23 August 2025

Plantilla HTML/CSS de página de inicio de sesión de lujo

13 August 2023

Formulario de inicio de sesión con redes sociales

HTML

<body>
  <div class="codigo">
    <span class="selector">.animationAnimation</span><br>
    <span class="property">animation</span><span class="value-number">: </span><span class="value-string">animateCaixa1 </span><span class="value-number">1s </span><span class="value-string">linear </span><span class="value-string">infinite alternate-reverse;</span>
  </div>
  <div class="animation-container">
    <div class="shape square animationAnimation" style="width: 80px; height: 80px; background-color: #F92672; margin: 0 10px;">
      
    </div>

</div>
</body>

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: 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);
    }
    
    
    /* --------------------
        Animando a caixinha 1
     -------------------- */
    
.animationAnimation{
  
  animation: 
    animateCaixa1 
    1s 
    linear 
    infinite alternate-reverse;
}

@keyframes animateCaixa1 {
  0% { 
    transform: translateY(0);
      opacity: 1;
  }
to 100% {
    transform: translateY(20px);
  opacity: 0;   
}

}
    
    .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: #111;
    }