css3 小球 弹跳 坠落 效果

今天,我们准备利用CSS3动画来做一个实验。在我们的前一篇文章中，我们讨论了如何利用CSS3动画实现改造“移动字幕”的效果。这次，我们将会尝试利用弹跳效果制作一个“通知栏”。

 

·  VIEW DEMO

 

准备开始

让我们先新建一个新的HTML工程文件，并且输入下面的代码用来构建这个通知栏。

view plaincopy to clipboardprint?

   <div class="css3-notification">  

        <p>Hi, this is a notification and it bounces.</p>  

   </div>  

 

然后，输入一些装饰样式的语句来修饰这个通知栏。

 

view plaincopy to clipboardprint?

     .css3-notification {  

       font-size: .8em;  //字体大小：8em

       text-align: center; //文字校准：居中

         padding: 10px;  //底填充：10像素

        background-color: #111;  //背景颜色：#111

       color: #fff;  //字体颜色：#fff

        box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .3);  //内阴影： 0px 1px 3px 0px  RGBA（颜色透明度）（0,0,0,3）

         text-transform: uppercase;  //文字大小写变换：大写

        position: relative;  //位置：相对

     font-weight: bold;  //字体粗细：粗体

}  

 

到此阶段，我们将会在浏览器中得到下面这样的结果。

编写CSS3动画的关键帧  

 

如何让弹跳进行下去的基本想法是，当这个实体第一次掉落在表面时，它从表面反弹，并且将会反弹达到它的最高水平。接着，在随后每一次反弹中，它逐渐达到一个较低的点，直到这个实体停止弹跳。以上想法反映在了下面的图中。              

 

 

步骤1：创建动画关键帧

 

现在，让我们开始在样式表中编写CSS3动画关键帧。在这个例子里，我们简单地把这个关键帧命名为bounce（弹跳）。

 

@keyframes bounce {  

}  

 

记住在这个教程中，我们会使用W3C的标准@keyframe（关键帧）语法来让代码看起来更简洁。但是，为了使这个动画能够在浏览器上运行，供应商语法（-webkit-,-moz-,-o-）必须被包含在内，并且随后你就可以在资源代码中找到它们。

 

步骤2：指定初始位置

 

首先，我们将这个实体设定在它的初始位置的顶端。在CSS3变换中，我们将Y 轴坐标赋值为负数。在下面的代码片段中，我们把这个初始位置设定在从0%到5%的这段时间帧内。因此，这个通知栏将会在这个位置上停止一段时间。

0% {          

 transform:translateY(-100%);        

opacity: 0; } 5% {       

 transform:translateY(-100%);     

opacity: 0;

}

 

步骤3：指定首次弹跳

 

然后，在时间轴的5%到15%的范围里，这个实体开始运动到它的初始位置。我们设置translateY 属性值回到0%。一般地，一个实体的弹跳是具有弹性的。当这个实体撞击一个固体时，撞击到那个表面的这个实体的一边，就一定会产生很小的压缩或者变形。因 此，对我们来说，我们就要把padding-bottom（底填充）从10像素减少到5像素。

 

1.        15% {  
2.            transform:translateY(0);  
3.            padding-bottom: 5px;  
4.        }  

 

这个实体在撞击表面以后将会向上回弹，在这个点上，也就是这个实体的回弹最高点，我们在时间帧的30%处将它设置为50%。

1.        30% {  
2.            transform:translateY(-50%);  
3.        }  

 

步骤4：指定第二次弹跳

 

在到达最高点以后，这个实体应该再返回0坐标位置，换句话说就是撞击地面。这个实体应该比之前的撞击产生相对较小的形变。因此，在这点上，我们只需把这个实体的padding-bottom（底填充）减少到6像素。

 

40% {      

transform:translateY(0%);    

padding-bottom: 6px;

}

之后它反弹。

这一次，它只能达到比之前更低的点；从当前位置向上移动到30%。

 

1.        50% {  
2.            transform:translateY(-30%);  
3.        }  

 

步骤5:不断继续弹跳直到它停止

 

这些事件不断重复直到到达时间轴的终点，下面的是剩余的动画部分——从时间轴的70%到100%。

 

70% {  
transform:translateY(0%);  
padding-bottom: 7px;  
}  
80% {  
transform:translateY(-15%);  
}  
90% {  
transform:translateY(0%);  
padding-bottom: 8px;  
}  
95% {  
transform:translateY(-7%);  
}  
97% {  
transform:translateY(0%);  
padding-bottom: 9px;  
}  
99% {  
transform:translateY(-3%);  
}  
100% {  
transform:translateY(0);  
padding-bottom: 9px;  
opacity: 1;  
}  

 

这就是我们刚才所需要的所有代码了，现在你可以从下面的链接中看到这个弹跳效果的动画演示。

 

·        VIEW DEMO

·     DOWNLOAD SOURCE

 

更多资源

 

下面是一些为了深入挖掘CSS3动画，变换以及更多弹跳效果的优秀资源。

 

Creating Advanced “Marquee”With CSS3 Animation — Hongkiat.com  

利用CSS3创建高级移动字幕效果—Hongkiat.com

 

CSS3 2D Transforms — Hongkiat.com   

CSS3 2D 变换—Hongkiat.com

 

What are all theequations we use to calculate how bounces work? — StackExchange   

那些我们使用去计算弹跳如何工作的方程式都是什么？— StackExchange

 

Bounce Effect with jQuery — jQuery.com   

利用jQuery的弹跳效果—jQuery.com

 

3D Bouncing Ballwith CSS3 —Codrops   

使用CSS3制作3D弹球—Codrops

原文链接：如何利用CSS3动画实现弹跳效果