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 0pxRGBA(颜色透明度)(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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页