WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pena caindo
900
byby.createsite
Abrir no Editor
Publique Seu Código
Recomendado
14 December 2025
Apenas um chefe
28 May 2025
Caneta de pena
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) */
