本篇内容主要讲解“CSS3中怎么用一个div做弹跳小动画”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3中怎么用一个div做弹跳小动画”吧!
网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了朔州免费建站欢迎大家使用！
由于只使用了一个div，要同时达到正方形旋转与阴影缩放的效果，这里必须使用两个伪元素（before与after）来完成，严格来说，虽然只有一个div，但是却是把这个div当作外框，让伪元素before作为旋转的正方形，让伪元素after作为阴影。
.box{
position:relative;
}.box:before{
content:'';
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
}.box:after{
content:'';
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
}
画出正方形与阴影之后，再来就是要做动画了，为了避免太过复杂，这里我们先不要旋转，先单纯让正方形上下跳动，然后阴影会放大缩小，下面的示例的动画，又新增了20%与80%的keyframe，目的是为了让接触的时候角落才会变圆，不然就会变成刚开始移动时尖角就变圆，就会很怪异了。
.box:before{
content:'';
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
-webkit-animation:box .8s infinite ;
}@-webkit-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%;
-webkit-animation:shadow .8s infinite ;
}@-webkit-keyframes shadow{
0%,100%{ left:54px;
width:40px;
background:#eaeaea;
} 50%{ top:126px;
left:50px; /*让阴影保持在原位*/
width:50px;
height:7px;
background:#eee;
}}
了解原理之后，我们只要再加上旋转的属性，就可以达到弹跳起来的时候有旋转的效果，不过这里又有用到一个小技巧，就是落下的时候是90度转到45度，弹上去的时候从45旋转到0度，然后在这一瞬间从0度变成90度（100%到0%），如此一来我们就会产生错觉，感觉好像一直在旋转了。
@-webkit-keyframes box{
0%{ top:50px;
transform: rotate(90deg); /**/
} 20%{ border-radius:2px;
} 50%{ top:80px;
transform: rotate(45deg);
border-bottom-right-radius:25px;
} 80%{ border-radius:2px;
} 100%{ top:50px;
transform: rotate(0deg);
}}专门建立的学习Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）到此，相信大家对“CSS3中怎么用一个div做弹跳小动画”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
