CSS, um den Animationseffekt fallender Blätter zu erzielen

Zweck:

Um den rotierenden und fallenden Effekt gefallener Blätter zu erzielen.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Der Code lautet wie folgt:

HTML-Code:

<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);}
        }

Beispielcode und Bilder:

fallen leaves.zip

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonCSS, um den Animationseffekt fallender Blätter zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!