如何使用HTML、CSS和JavaScript构建一个弹跳球

在使用纯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动画创建了一个弹跳球效果。创建了一个带有定义高度和背景颜色的块（彷徨类），其内容（一个无序列表彷徨-UL）在垂直和水平方向上居中对齐。球（彷徨LI类）作为一个列表项创建，具有定义的宽度、高度、背景颜色、边距和边界半径，使其呈圆形。
动画使用@keyframes规则创建，该规则定义了CSS属性值随时间的变化。动画名为“彷徨”，持续时间为1秒，具有线性时间函数和无限的交替反向迭代次数。球在垂直方向上移动，从其原始位置（0%）移动到最高点（50%处的-150px），然后返回到其原始位置（100%）

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

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