扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下CSS3如何实现弹跳的小球动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联服务项目包括颍州网站建设、颍州网站制作、颍州网页制作以及颍州网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,颍州网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到颍州省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
这个案例关键点在于小球弹跳的节奏感和布局定位。
一、案例知识点
1、相对和绝对定位
2、多个animation动画列队
二、主体代码
1、HTML代码
2、CSS部分代码
#wrap{ position:absolute; left:0; right:0; top:0; bottom:0; width:580px; height:143px; margin:auto; } #wrap img{ width:160px; } #wrap div{ float:left; margin-right:50px;} #wrap div:last-child{ margin-right:0;} .tu1,.tu2,.tu3{ position:absolute; left:50%; margin-left:-80px; } .tu1{ z-index:1; animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,leftMove 0.4s ease-out 1.2s 1 forwards,rotate 1s linear 1.6s infinite; } .tu2{ z-index:2; animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,middle 0.4s ease-out 1.2s 1 forwards; } .tu3{ z-index:3; animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,rightMove 0.4s ease-out 1.2s 1 forwards; } @keyframes tiantiao1{ 0%{ transform:translateY(-500px); } 100%{ transform:translateY(0);} } @keyframes tiantiao2{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-100px);}} @keyframes tiantiao3{ 0%{ transform:translateY(-100px);} 100%{ transform:translateY(0);}} @keyframes tiantiao4{ 0%{ transform:translateY(0px);} 100%{ transform:translateY(-50px);}} @keyframes tiantiao5{ 0%{ transform:translateY(-50px);} 100%{ transform:translateY(0);} } @keyframes leftMove{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-300px) scale(1.6); }} @keyframes rightMove{ 0%{ transform:translateX(0);} 100%{ transform:translateX(300px) scale(1.6); }} @keyframes middle{ 0%{ transform:translateX(0); } 100%{ transform:translateX(0) scale(1.6); }}
多个队列的动画要注意动画的延迟。上一个队列的动画执行完毕后才执行下一个队列的动画。
完整页面代码
小球掉落依次排列动画
以上是“CSS3如何实现弹跳的小球动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流