WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Feather falling
100
ByBy.inc
Open In Editor
Publish Your Code
28 May 2025
Feather quill pen
10 March 2025
Animated falling skills
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) */
