目的：
实现落叶的旋转下落效果。
（学习视频分享：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视频教程
相关推荐：css视频教程
以上就是css实现落叶动画效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2881257.html
