WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Feder fallen
277
ByBy.inc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
19 September 2024
hinfallen
28 May 2025
Federkiel
HTML
Copy
<body> <!--Estrutura HTML --> <div class="image"> <div class="reference"></div> <img src="feather.png" alt="feather"> </div> </body>
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) */
