CSS3小球掉落依次排列动画
大致思路:
1、先在一个大盒子里建立三个小盒子来储存图片
2、为大盒子绝对定位脱标,然后再将图片脱标集中在一起
3、先为三个图片添加公共动画,其中:
4、为三个图片分别添加向左、向右以及原地不动的动画
<div id="wrap">
<div class="pic1"><img src="./img/1.png" alt=""></div>
<div class="pic2"><img src="./img/2.png" alt=""></div>
<div class="pic3"><img src="./img/3.png" alt=""></div>
</div>
css
body,
div {
margin: 0;
padding: 0;
}
body {
color: aliceblue;
}
#wrap {
width: 580px;
height: 143px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
#wrap img {
width: 160px;
}
#wrap div {
float: left;
margin-right: 50px;
}
/* 给三个小盒子添加定位,让他们最初出现在哪,和布局没有关系,和要做的弹跳的位置有关系 */
.pic1,
.pic2,
.pic3 {
/* 绝对定位目的:让三个小盒子都在一个位置出现 */
position: absolute;
left: 50%;
margin-left: -80px;
}
.pic1 {
z-index: 5;
/* jumper1 动画名称 0.5s 动画完成时间 ease-in 动画以慢速开始 1 动画完成次数 forwars 停留在动画最后一帧 */
animation: jumper1 0.5s ease-in 1 forwards,
/* jumper2 动画名称 0.2s 动画完成时间 ease-out 动画以慢速结束 0.5s 动画推迟0.5s运行 1 动画完成次数 forwars 停留在动画最后一帧 */
jumper2 0.2s ease-out 0.5s 1 forwards, jumper3 0.2s ease-in 0.7s 1 forwards, jumper4 0.15s ease-out 0.9s 1 forwards, jumper5 0.15s ease-in 1.05s 1 forwards, leftmove 0.4s ease-out 1.2s 1 forwards;
}
.pic2 {
z-index: 2;
animation: jumper1 0.5s ease-in 1 forwards,
/* 停留在最后一帧 */
jumper2 0.2s ease-out 0.5s 1 forwards, jumper3 0.2s ease-in 0.7s 1 forwards, jumper4 0.15s ease-out 0.9s 1 forwards, jumper5 0.15s ease-in 1.05s 1 forwards, middle 0.4s ease-out 1.2s 1 forwards;
}
.pic3 {
z-index: 3;
animation: jumper1 0.5s ease-in 1 forwards,
/* 停留在最后一帧 */
jumper2 0.2s ease-out 0.5s 1 forwards, jumper3 0.2s ease-in 0.7s 1 forwards, jumper4 0.15s ease-out 0.9s 1 forwards, jumper5 0.15s ease-in 1.05s 1 forwards, rightmove 0.4s ease-out 1.2s 1 forwards;
}
#wrap div:last-child {
margin-right: 0;
}
@keyframes jumper1 {
0% {
transform: translateY(-500px);
}
100% {
transform: translateY(0);
}
}
@keyframes jumper2 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100px);
}
}
@keyframes jumper3 {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
@keyframes jumper4 {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-50px);
}
}
@keyframes jumper5 {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
@keyframes middle {
0% {
transform: translateX(0);
}
100% {
transform: translateX(0) scale(1.6) rotate(360deg);
}
}
@keyframes rightmove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px) scale(1.6) rotate(360deg);
}
}
@keyframes leftmove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-300px) scale(1.6) rotate(360deg);
}
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果