平时喜欢逛各大网站的专题版面，或者产品发布页面，因为可以看到很多炫酷的页面效果。这个案例的素材来自于百度浏览器的发布页面，以及下一个案例“变色龙动画”都是来自于百度浏览器，虽然我是谷歌浏览器的忠实用户，但是不得不说国内互联网行业知名品牌网站的专题页、产品发布页都是卯足了劲的让页面看起来很酷炫。
这个案例关键点在于小球弹跳的节奏感和布局定位。
一、案例知识点
1、相对和绝对定位
2、多个animation动画列队
二、主体代码
1、html代码
<div id="wrap"> <div class="tu1"><img src="images/1.png" /></div> <div class="tu2"><img src="images/2.png" /></div> <div class="tu3"><img src="images/3.png" /></div></div>
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 ea-in 1 forwards,tiantiao2 0.2s ea-out 0.5s 1 forwards,tiantiao3 0.2s ea-in 0.7s 1 forwards,tiantiao4 0.15s ea-out 0.9s 1 forwards,tiantiao5 0.15s ea-in 1.05s 1 forwards,leftmove 0.4s ea-out 1.2s 1 forwards,rotate 1s linear 1.6s infinite;}.tu2{z-index:2;animation:tiantiao1 0.5s ea-in 1 forwards,tiantiao2 0.2s ea-out 0.5s 1 forwards,tiantiao3 0.2s ea-in 0.7s 1 forwards,tiantiao4 0.15s ea-out 0.9s 1 forwards,tiantiao5 0.15s ea-in 1.05s 1 forwards,middle 0.4s ea-out 1.2s 1 forwards;}.tu3{z-index:3;animation:tiantiao1 0.5s ea-in 1 forwards,tiantiao2 0.2s ea-out 0.5s 1 forwards,tiantiao3 0.2s ea-in 0.7s 1 forwards,tiantiao4 0.15s ea-out 0.9s 1 forwards,tiantiao5 0.15s ea-in 1.05s 1 forwards,rightmove 0.4s ea-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%{t商圣范蠡ransform: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);}}多个队列的动画要注意动画的延迟。上一个队列的动画执行完毕后才执行下一个队列的动画。
完整页面代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; chart=utf-8" /><title>小球掉落依次排列动画</title><style type="text/css">body,div,footer,p{margin:0;padding:0;}body{font:1em "microsoft yahei";background-color:#eee;}#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 ea-in 1 forwards,tiantiao2 0.2s ea-out 0.5s 1 forwards,tiantiao3 0.2s ea-in 0.7s 1 forwards,tiantiao4 0.15s ea-out 0.9s 1 forwards,tiantiao5 0.15s ea-in 1.05s 1 forwards,leftmove 0.4s ea-out 1.2s 1 forwards,rotate 1s linear 1.6s infinite;}.tu2{z-index:2;animation:tiantiao1 0.5s ea-in 1 forwards,tiantiao2 0.2s ea-out 0.5s 1 forwards,tiantiao3 0.2s ea-in 0.7s 1 forwards,tiantiao4 0.15s ea-out 0.9s 1 forwards,tiantiao5 0.15s ea-in 1.05s 1 forwards,middle 0.4s ea-out 1.2s 1 forwards;}.tu3{z-index:3;animation:tiantiao1 0.5s ea-in 1 forwards,tiantiao2 0.2s ea-out 0.5s 1 forwards,tiantiao3 0.2s ea-in 0.7s 1 forwards,tiantiao4 0.15s ea-out 0.9s 1 forwards,tiantiao5 0.15s ea-in 1.05s 1 forwards,rightmove 0.4s ea-out 1.2s 1 forwards;}footer{position:absolute;bottom:20px;left:50%;margin-left:-104px;}footer p{text-align:center;margin-bottom:.7em;}footer a{color:#666;text-decoration:none;}footer a:hover{color:#333;}@keyframes tiantiao1{0%{transform:translatey(-500px);}100%{transform:translatey(0);}}@keyframes tiantiao2{0%{transform:translatey(0);}100%{transform:translatey(-100px);}}@keyframes tiantiao3如何点亮qq飞车图标{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);}}</style></head><body><div id="wrap"><div class="tu1"><img src="images/1.png" 2013中秋/></div> <div class="tu2"><img src="images/2.png" /></div> <div class="tu3"><img src="images/3.mall是什么意思png" /></div></div><footer> <p>www.887551.com</p> <p><a href="/d/file/titlepic/www.jb51.net" target="_blank">www.jb51.net</a></p></footer></body></html>以上就是css3 实现弹跳的小球动画的详细内容，更多关于css3 实现弹性小球动画的资料请关注www.887551.com其它相关文章！
本文发布于:2023-04-03 20:54:13，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/b25d4e4120378523fb32aa1b776489cd.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS3 实现弹跳的小球动画.doc
本文 PDF 下载地址：CSS3 实现弹跳的小球动画.pdf
| 留言与评论（共有 0 条评论） |
