如何使用 HTML、CSS 和 JavaScript 制作弹跳球?

htmlcssweb developmentfront end technology更新于 2024/1/1 13:00:17

在使用纯 HTML、CSS 和 JavaScript 设计网页时，程序员通常更喜欢开发高级 CSS 设计来提升网站的吸引力。使用关键帧和其他技术创建动画是当今最流行的技术之一。但是，我们也可以使用 JavaScript 代码来创建类似弹跳球效果的动画。这种方法可以让我们更好地控制动画。

本文将首先解释如何使用 HTML 和 CSS 制作弹跳球。我们还将学习如何编写 JavaScript 代码来实现类似的动画。

使用关键帧创建弹跳球

使用纯 HTML 代码制作动画非常困难。相反，我们有 CSS，它为我们提供了多种实现不同动画的技术。在 CSS 中设计动画最流行的方法是使用关键帧。

但是，要创建一个弹跳球，我们必须开发一个登录程序来实现它。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   bouncing {
      display: flex;
      flex-direction: row;
      background-color: rgb(223, 210, 176);
      align-items: center;
      justify-content: center;
      height: 50vh;
   }
   .bouncing-ul {
      display: flex;
      flex-direction: row;
   }
   .bouncing-ul li {
      width: 40px;
      height: 40px;
      list-style: none;
      background-color: rgb(55, 17, 108);
      margin: auto 20px;
      border-radius: 50%;
      animation: bouncing 1s linear infinite alternate-reverse;
   }
   @keyframes bouncing {
      0% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(-150px);
      }
      100% {
         transform: translateY(0);
      }
   }
</style>
</head>
<bouncing>
   <ul class="bouncing-ul">
      <li class="bouncing-li"></li>
   </ul>
</bouncing>
</html>

HTML 代码使用 CSS 动画创建了一个弹跳球效果。创建一个块(bouncing 类)，并定义其高度和背景色。其内容(一个无序列表 bouncing-ul)在垂直和水平方向上居中对齐。球(bouncing-li 类)被创建为一个列表项，并定义其宽度、高度、背景色、边距和边框半径，使其呈现圆形。
该动画使用 @keyframes 规则创建，该规则定义了 CSS 属性值随时间的变化。动画名为"bouncing"，持续时间为 1 秒，具有线性计时函数和无限的交替-反向迭代次数。球垂直移动，从其原始位置 (0%) 平移到最高点(50% 处 -150px)，然后返回到原始位置 (100%)。

如何使用 JavaScript 创建弹跳球效果

到目前为止，我们已经了解了如何仅使用 HTML 和 CSS 创建弹跳球效果。但是，有时我们可能希望使用 JavaScript 等编程语言而不是标记语言来执行相同的任务。JavaScript 可以访问浏览器的 window 对象。因此，定义类似于 CSS 的规则很容易。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .ball {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background-color: rgb(41, 66, 190);
   }
   body{
      display: flex;
      flex-direction: row;
      justify-content: center;
   }
</style>
</head>
<body>
<div class="ball"></div>
<script>
   const ball = document.querySelector('.ball');
   let y = 0;
   let direction = 1;
   let speed = 8;
   setInterval(() => {
      y = y + speed * direction;
      if (y >= window.innerHeight/3 - 50) {
         direction = -1;
      }
      if (y <= 0) {
         direction = 1;
      }
      ball.style.top = y + 'px';
   }, 20);
</script>
</body>

说明

我们定义了一个名为 ball 的元素，并使用 CSS 对其进行了自定义，使其形状变为圆形。在 script 标签中，我们编写了 JavaScript 代码，其中包含动画的所有逻辑。
首先，我们确定了 ball 元素的目标。接下来，我们定义了速度。在 2 秒内，球会上下移动。每当球到达任一方向的终点时，方向就会改变。