css动画，实现落叶效果

最新推荐文章于 2024-07-27 10:37:47 发布

zhl_cafe_noir

最新推荐文章于 2024-07-27 10:37:47 发布

阅读量5.8k

点赞数 4

分类专栏：前端文章标签： css 动画落叶效果

本文链接：https://blog.csdn.net/zhl_cafe/article/details/53258260

版权

前端专栏收录该内容

31 篇文章 2 订阅

订阅专栏

实现叶子的下落效果：旋转和降落。直接上代码:

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

        #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