WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Plume qui tombe
906
byby.createsite
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
22 November 2025
Effet de survol du bouton en verre liquide CSS
14 June 2023
Carte membres de l'équipe CSS
23 August 2025
Météo en Turquie : prévisions météo instantanées à 7 jours
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) */