CSS3如何实现弹跳的小球动画
本文主要介绍"CSS3怎么实现弹跳的小球动画"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "CSS3怎么实现弹跳的小球动画" 文章。
这个案例关键点在于小球弹跳的节奏感和布局定位。
一、案例知识点
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 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怎么实现弹跳的小球动画" 就介绍到这。希望大家多多支持编程宝库。
css盒子模型之内边距padding怎么用：本文主要介绍"css盒子模型之内边距padding如何用"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "css盒子模型之内边距padding如何用" 文章。如上图,padding值是复合属 ...