danse de formes interactive

1,324 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 March 2024

Code HTML du menu latéral

29 November 2024

Un code par efficientapp58

10 December 2025

Démo du jeu Flappy Bird - HTML Canvas JavaScript

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;
    }