css动画-小球撞壁反弹

小球碰到一面壁之后一般都会反弹，反射角=入射角；

其实用css3来实现这个效果也非常简单。

首先，分解一下小球的运动：水平运动和垂直运动。

当小球往右下方向运动时，如果碰到了下面的壁，那么由于碰撞，小球受到了垂直于墙壁的力（即向上的力），这样的话水平运动是不会受到影响的，只有垂直运动受到了影响。所以在与上下壁碰撞时只需改变上下运动的方向，左右运动不变；以此类推，当小球与左右壁相碰撞时，只需改变水平运动的方向，垂直方向无需改动。

有了这个思路，就可以开始用css3动画来实现这个小球碰撞时反弹了。

1.html:

 <div id="box">
       <div id="ball-box">
            <div id="ball"></div>
       </div>
 </div>

2.css:

 #box {
     width: 300px;
     height: 150px;
     border: 1px solid #7aa4c0;
 }
 #ball-box {
     width: 20px;
     height: 20px;
     border-radius: 10px;
     animation: bouncey linear 3s infinite;
     -webkit-animation: bouncey linear 3s infinite;
 }
 #ball {
     width: 20px;
     height: 20px;
     border-radius: 10px;
     background: -webkit-radial-gradient(circle, #ddecee, #0377db);
     background: -o-radial-gradient(circle, #ddecee, #0377db);
     background: -moz-radial-gradient(circle, #ddecee, #0377db);
     background: radial-gradient(circle, #ddecee, #0377db);
     animation: bouncex linear 5s infinite;
     -webkit-animation: bouncex linear 3s infinite;
 }
 @keyframes bouncey
 {
     0%,100% {
         transform:translateY(0px);
         -webkit-transform:translateY(0px);
         }
     50% {
         transform:translateY(130px);
         -webkit-transform:translateY(130px);
         }
 }
 @keyframes bouncex
 {
     0%,100% {
         transform:translateX(0px);
         -webkit-transform:translateX(0px);
         }
     50% {
         transform:translateX(280px);
         -webkit-transform:translateX(280px);
         }
 }

css Code

小球的颜色利用css3里面的径向渐变，使小球看起来更加具有立体视觉感受。

好啦，大功告成= =