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

例子代码和图片：

落叶.zip

相关推荐：CSS教程