Duelo de cambiaformas

1,279 byby.createsite

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

18 June 2025

Un código de ByBy.inc

18 May 2026

Formulario HTML para enviar monedas de TikTok

11 May 2024

Activar y desactivar

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 */
  }
}