CSS3 实现弹跳的小球动画

CSS3 实现弹跳的小球动画

前言

CSS3 动画已经成为现代 Web 设计中的一个不可或缺的部分。本文将详细介绍如何使用纯 CSS3 实现一个弹跳的小球动画，并提供两个示例相关的说明。

准备工作

在开始之前，请确保您已熟悉以下技术：

• HTML5
• CSS3

实现方法

第一步：HTML 结构

首先，我们需要先创建 HTML 结构，这里我们需要一个 div 容器和一个代表小球的 div 元素，如下：

<div class="container">
  <div class="ball"></div>
</div>

第二步：CSS 样式

接下来，我们添加 CSS 样式并设置球的位置，如下：

.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #ddd;
}

.ball {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

第三步：动画效果

接下来，我们使用 CSS3 的 animations 属性来定义动画效果，并使用 keyframes 定义弹跳效果。由于我们需要球在水平方向上持续运动，我们使用了 infinite 关键字来让动画永久循环。

.ball {
  /* 省略上述样式代码 */
  animation: ball-bounce 1s infinite;
}

@keyframes ball-bounce {
  from {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-200px);
  }
  to {
    transform: translateY(0);
  }
}

额外效果

我们可以进一步修改上面的代码，让小球在弹跳时略微变形，形成更真实的弹跳效果。

.ball {
  /* 省略上述样式代码 */
  animation: ball-bounce 1s infinite;
  transform-origin: bottom center;
}

@keyframes ball-bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0,-15px,0) scale(0.9);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

示例

以下是两个基于上面代码的示例：

• 代码pen
• 代码pen

总结

在本文中，我们学习了如何使用 CSS3 实现一个弹跳的小球动画，为了不使文章变得过于冗长，我们只给出了两个实例代码，在此基础上，您可以进一步完善动画效果。最后提醒大家，在实际应用中，可以通过 JavaScript 来控制动画的启动和暂停，以及动画结束后执行的事件。