css3 小球弹跳坠落效果

最新推荐文章于 2023-06-23 02:15:59 发布

看世界-Neilson

最新推荐文章于 2023-06-23 02:15:59 发布

阅读量8.1k

点赞数

分类专栏： css3

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天,我们准备利用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;
}