web前台入门到实战：只用一个div来做的弹跳小动画

这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于究竟该怎样完成呢？让我们继续看下去。

利用伪元素

因为只使用了一个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%;}

CSS动画

画出正方形与阴影之后，再来就是要做动画了，为了避免太过复杂，这里我们先不要旋转，先单纯让正方形上下跳动，而后阴影会放大缩小，下面的示例的动画，又新添加了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： 731771211，分享学习方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）

举一反三，我们也可以把角度反转，就会往另外一边弹跳。

假如我们把动画里头增加linear，就会变成线性的连续方式喔。