danse de formes interactive

733 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 May 2025

Un code par toninrazafison

14 May 2025

Un code par kaiser.zulassungsservice.gmbh

19 November 2025

Modèle de tableau de bord d'administration HTML avec CSS et graphiques

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

Recommandé

Un code par toninrazafison

Un code par kaiser.zulassungsservice.gmbh

Modèle de tableau de bord d'administration HTML avec CSS et graphiques

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS