CSS pour obtenir un effet d'animation de feuilles tombantes

Objectif :

Pour obtenir l'effet de chute rotatif des feuilles mortes.

(Partage vidéo d'apprentissage : tutoriel vidéo css)

Le code est le suivant :

code html :

<div class="con">
    <img src="img/yeluobig.png" id="yeluobig"/>
    <img src="img/yeluolit1.png" id="yeluolit1"/>
    <img src="img/yeluolit2.png" id="yeluolit2"/>
</div>

css code :

        #yeluobig{position: absolute;top: 29%;left: 30%;
            -webkit-animation:luo 8s infinite linear;
            animation:luo 8s infinite linear;}
        #yeluolit1{position: absolute;top: -2%;left: 40%;
            -webkit-animation:luo 8s infinite 2s linear;
            animation:luo 8s infinite 2s linear;}
        #yeluolit2{position: absolute;top: -2%;left: 50%;
            -webkit-animation:luo 8s infinite 4s linear;
            animation:luo 8s infinite 4s linear;}
        @-webkit-keyframes luo{
            0%{top: -1%;transform:rotate(-60deg);}
            100%{top: 100%;transform:rotate(60deg);}
        }
        @keyframes luo{
            0%{top: -1%;transform:rotate(-60deg);}
            100%{top: 100%;transform:rotate(60deg);}
        }

Exemple de code et images :

fallen leaves.zip

Recommandations associées : Tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!