css实现落叶动画效果-木庄网络博客

本文摘自PHP中文网，作者V，侵删。

目的：

实现落叶的旋转下落效果。

（学习视频分享：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);}
}