使用CSS3制作小球弹跳的动画效果

查看演示 下载地址

在网页中模拟一些特殊的力学运动效果，如：物体摩擦、惯性或重力效果，我们可以通过使用CSS3的贝兹曲线来完成这些特效。

物体受重力的效果是一种非常复杂的动画过程，我们可以使用CSS来模拟这一效果。典型的重力效果是小球的弹跳效果。小球受重力和自身弹力的影响不停的上下弹跳。使用CSS制作这个效果其实并不复杂。小球的HTML结构使用一个空的<div>即可。

<div id="redball"></div>                              
                            

给小球div一些基本样式：

#redball {
  border-radius: 50%;
  width: 20vw; height: 20vw;
  background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000);
  margin: 0 auto;
}                              
                            

border-radius: 50%;将div设置为圆形，然后通过渐变使它产生立体感。小球的宽度和高度都使用vw作为单位，1vw等于当前屏幕宽度的1%。（关于CSS的单位可以查看这篇文章。）这样做是为了是使设计具有响应式效果。

然后，我们就可以使用CSS的帧动画来制作小球受重力运动的效果。注意代码中没有使用浏览器厂商的前缀。

@keyframes bounce {
  from, to {
  transform: translateY(30vh);
  }
  80% {
  transform: translateY(15vh);
  }
}                              
                            

同样，translate的值使用了vh作为单位。1vh等于当前屏幕高度的1%。 通过vw和vh作为单位的最大好处是，不必使用@media queries也能在现代浏览器中做到响应式效果。

接下来在小球上调用帧动画。

#redball {
  transform-origin: center bottom;
  animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}                              
                            

注意要记得修改小球的transform-origin，这使得小球动画可以很好的定位。另外在animation中使用了一个特殊的贝兹曲线函数，用以制作重力效果。

现在，小球已经可以上下弹跳了，但是整个动画效果还不十分完美。现实生活中，小球在弹跳时，受重力和引力的作用会在弹跳过程中被轻微的挤压。所以，我们也要模拟这一效果，可以通过 CSS transforms 的scale属性来完成它。

@keyframes bounce {
  from, to {
  transform: translateY(30vh) scaleY(.98);
  }
  80% {
  transform: translateY(15vh) scaleY(1.02);
  }
}                              
                            

当然，我们不可能模拟得十全十美。小球会一直弹跳下去，并不会因为引力的作用而慢慢停止。但是这些问题都是可以解决的，希望大家自己开动脑筋，动手做一下！

查看演示 下载地址