落ち葉アニメーション効果を実現するCSS

目的:

落ち葉の回転と落下効果を実現します。

(学習ビデオ共有: css ビデオ チュートリアル)

コードは次のとおりです:

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コード:

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

コード例と写真:

fallen Leaves.zip

関連する推奨事項: CSS チュートリアル

以上が落ち葉アニメーション効果を実現するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。