CSS3如何实现弹跳的小球动画

2023-06-08 02:06:21 154人浏览八月长安

摘要

小编给大家分享一下css3如何实现弹跳的小球动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！这个案例关键点在于小球弹跳的节奏感和布局定位。一、案例知识点相对和绝

小编给大家分享一下css3如何实现弹跳的小球动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

这个案例关键点在于小球弹跳的节奏感和布局定位。

一、案例知识点

相对和绝对定位

多个animation动画列队

二、主体代码

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>

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);}}

多个队列的动画要注意动画的延迟。上一个队列的动画执行完毕后才执行下一个队列的动画。

完整页面代码

<!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; charset=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 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;}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{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" /></div>    <div class="tu2"><img src="images/2.png" /></div>    <div class="tu3"><img src="images/3.png" /></div></div><footer>     <p>编程网</p>     <p><a href="https://www.yisu.com" target="_blank">www.yisu.com</a></p></footer></body></html>

以上是“CSS3如何实现弹跳的小球动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！

--结束END--

本文标题: CSS3如何实现弹跳的小球动画

本文链接: https://lsjlt.com/news/251036.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341