有趣的CSS弹跳动画

edgardeng 发布于2019-08-29 18:46 / 2191人阅读

摘要：举一反三，我们也可以把角度反转，就会往另外一边弹跳。如果我们把动画里头添加，就会变成线性的连续方式喔。

这是只用了一个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);
  }
}

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

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

私有云 GPU服务器 css3动画高性能css3动画有趣的事有趣的python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114565.html

有趣的CSS弹跳动画

摘要：举一反三，我们也可以把角度反转，就会往另外一边弹跳。如果我们把动画里头添加，就会变成线性的连续方式喔。这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。利用伪元素由于只使用了一个div，要同时达到正方形旋转与阴影缩放的...

alaege 2019-08-02 16:16 评论0 收藏0
【Hello CSS】第九章-如何画一个体验更好的动画？

摘要：那就是重力加速度的表现以及弹力球与空气，地面所产生的摩擦力的表现。弹力球下落时，由于重力加速度的原因，所以速度会越来越大，往上跳时速度会越来越小直至。作者：陈大鱼头 github： KRISACHAN 在上一节中，不走心地画了一些 CSS图案，本节就继续不走心地画动画。 CSS的动画属性在CSS中，animation 、 transition 跟 transform...

BothEyes1993 2019-08-30 15:44 评论0 收藏0
推荐三两款前端动画库，anitmate.css, velocity-animate， anime,

摘要：所以就说说吧优点可自定义动画效果，支持队列动效支持回调函数支持动画的，等等功能缺点缺少自定义特效文档比较少使用遇到的小问题默认不是匀速的，需要设置详细整理待续在最近一段时间的工作里，常常用到动画，我主要接触了三个 animate.cssanimevelocity 下面分析一下他们的优缺点 animate.css 优点：animate.css主要是使用css实现动画效果，目前已经有几十...

xzavier 2019-08-20 16:10 评论0 收藏0
翻译 | 深入理解CSS时序函数

摘要：一条正在绘制中的三次方贝塞尔曲线因为该曲线由四个点形成，我们将其称为三次方贝塞尔曲线，而不是二次方曲线三个点或四次方曲线五个点。现在终于可以将贝塞尔曲线收入囊中了，也已经对这作者：Nicolas（沪江前端开发工程师）本文原创翻译，转载请注明作者及出处。各位，赶紧绑住自己并紧紧抓牢了，因为当你掌握了特别有趣但又复杂的CSS时序函数之后，你将会真正体验到竖起头发般的兴奋感受。好吧，本...

Little_XM 2019-08-29 13:21 评论0 收藏0