WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Duelo de cambiaformas
366
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
14 September 2024
Interacción con carteles de películas
8 March 2024
Plantilla de barra de navegación HTML CSS
12 July 2025
Contador de clics de la barra espaciadora - JavaScript HTML
HTML
Copy
CSS
Copy
* { 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 */ } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */