android 落叶效果,css实现落叶动画效果

目的：

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

(学习视频分享：css视频教程)

代码如下：

html代码：

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教程