使用纯CSS代码模拟实现小球自由落体效果：

html代码如下：

1 
     
      2 　　
      
3 
     

CSS样式代码：

/*ball样式*/#ballDiv{
    height:400px; background-color:#333333;}#ball{
    width:100px; height:100px; border-radius:50%; background:-webkit-radial-gradient(center center,circle,#fff,blue); box-shadow:3px 7px 8px #ccc; -webkit-animation:ball 5s cubic-bezier(0.0,0.25,0.50,1.0); -webkit-transform:translate(250px, 300px);}@-webkit-keyframes ball{
   　　0%{-webkit-transform:translate(0, 0);}　　10%{
   -webkit-transform:translate(0, 330px); height:70px;}　　20%{
   -webkit-transform:translate(50px, 50px); height:100px;}　　30%{
   -webkit-transform:translate(50px, 330px); height:70px;}　　40%{
   -webkit-transform:translate(100px, 100px); height:100px;}　　50%{
   -webkit-transform:translate(100px, 320px); height:80px;}　　60%{
   -webkit-transform:translate(150px, 150px); height:100px;}　　70%{
   -webkit-transform:translate(150px, 320px); height:80px;}　　80%{
   -webkit-transform:translate(200px, 200px); height:100px;}　　90%{
   -webkit-transform:translate(200px, 300px); height:100px;}　　100%{
   -webkit-transform:translate(250px, 300px); height:100px;}}