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：⑦⑧④-⑦⑧③-零①②，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！