danse de formes interactive

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 February 2024

Morphing de particules avec Three.js

28 July 2025

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

danse de formes interactive

Recommandé

Défilement infini de tags

Morphing de particules avec Three.js

code bloom

HTML

CSS

JS

Recommandé

Défilement infini de tags

Morphing de particules avec Three.js

code bloom

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS