<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹跳动画</title>
<style>
.box:before{
content:'';
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#ffa200;
border-radius:2px;
transform: rotate(45deg);
animation:box .8s infinite ;
}
@keyframes box{
0%{
top:50px;
}
20%{
border-radius:2px; /*从20%的地方才开始变形*/
}
50%{
top:80px;
border-bottom-right-radius:25px;
}
80%{
border-radius:2px; /*到80%的地方恢复原状*/
}
100%{
top:50px;
}
}
.box:after{
content:'';
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
animation:shadow .8s infinite ;
}
@keyframes shadow{
0%,100%{
left:54px;
width:40px;
background:#eaeaea;
}
50%{
top:126px;
left:50px; /*让阴影保持在原位*/
width:50px;
height:7px;
background:#eee;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ef29e21655b793b76c505401c467bdc2.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7488a384105028d7d1a4a681daafec36.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4436887eb3b0ffe42560ecd867b8d82f.png#pic_center)