Scontro tra mutaforma

20 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

20 June 2025

Modello di dashboard di amministrazione HTML

22 May 2025

Animazione di Star Trails

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

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

/* Animação do Shapeshift Showdown */
.shapeshifter_container {
  position: relative;
  width: 200px;
  height: 200px;
}

.shape {
  position: absolute;
  width: 100px;
  height: 100px;
  animation: shapeDance 3s linear infinite;
  background-color: #F92672;
}

.shape.shape1 {left: 50px; top: 50px; transform-origin: 50% 50%;} /* Definição da primeira forma */
.shape.shape2 {left: 100px; top: 100px; transform-origin: 50% 100%;} /* Definição da segunda forma */

@keyframes shapeDance {
  0% {
    transform: rotate(0deg) scale(1); 
    opacity: 1;
  }
  50% {
    transform: rotate(360deg) scale(1.2); /* Rotacionar e aumentar o tamanho na metade do loop */ 
  }
  100% {
    transform: rotate(720deg) scale(1); 
    opacity: 0; /* Reduzir a opacidade no final do loop */
  }
}

Scontro tra mutaforma

Consigliato

Modello di dashboard di amministrazione HTML

Dashboard di amministrazione

Animazione di Star Trails

HTML

CSS

JS

Consigliato

Modello di dashboard di amministrazione HTML

Dashboard di amministrazione

Animazione di Star Trails

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS