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

查看演示 下载地址

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

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

即可。

<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);   } }

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

查看演示 下载地址

本文版权属于jQuery之家，转载请注明出处：http://www./ziliaoku/qianduanjiaocheng/201503231566.html

Previous: 上一篇：使用jQuery和Session storage构建客户端购物车系统