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

範例程式碼與圖片：

#相關推薦：CSS教學

# ##

以上是css實現落葉動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！