WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Scontro tra mutaforma
368
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
24 January 2025
Casella di accesso/registrazione rotazione 3D
5 February 2025
Pannello di controllo di amministrazione di AdminHub
6 August 2025
Trasformazione delle particelle con Three.js
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) */