WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Piuma che cade
112
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
16 November 2024
Scheda sfumata HTML
28 October 2024
Progettazione della scheda profilo
19 May 2025
Animazione 3D della scatola delle mosche
HTML
Copy
CSS
Copy
*{ margin:0; padding:0; box-sizing:border-box; } body{ height:100vh; width:100vw; background-color:black; display:flex; flex-direction: column; justify-content: center; overflow:hidden; }/* imagem de lado e la em cima com animacao caindo para baixo sem rodar*/ .image{ transform:rotateZ(90deg) translateX(-150%); scale:0.12; animation: fall 15s linear forwards; } /*imagem com rotateZ para rodar a pena a partir do ponto -700px center*/ .image img{ animation: rotateReference 14s linear forwards; transform-origin: -700px center; } /*animacao da pena caindo */ @keyframes rotateReference{ 0%{transform:rotateZ(0);} 10%,30%,50%,70%{transform:rotateZ(30deg);} 20%,40%,60%,80%{transform:rotateZ(-30deg);} 90%{transform:rotateZ(30deg);} 100%{transform:rotateZ(0);} } @keyframes fall{ 0%{transform: rotateZ(90deg) translateX(-150%);} 100%{ transform: rotateZ(90deg) translateX(200%); } } /*2 animacoes ao mesmo tempo e independentes */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */