当前位置主页 > 资料库 > 前端教程 > 使用CSS3制作小球弹跳的动画效果

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

2015-03-23

查看演示 下载地址

在网页中模拟一些特殊的力学运动效果,如:物体摩擦、惯性或重力效果,我们可以通过使用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%。 通过vwvh作为单位的最大好处是,不必使用@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);
  }
}                              
                            

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

查看演示 下载地址

Previous:
上一篇:使用jQuery和Session storage构建客户端购物车系统
Next:
下一篇:在网页中使用内联SVG图标和字体图标的比较
返回顶部