如何使用 HTML 和 CSS 创建粘球动画?

csshtmlweb developmentfront end technology更新于 2024/1/12 17:48:17

粘球动画是一种使用 HTML 和 CSS 创建的动画。这种动画样式的创建方法是使用关键帧在动画的不同点指定 CSS 属性值，然后将动画应用于 HTML 元素。

粘球是一种使用 HTML 和 CSS 创建的流行且视觉上引人入胜的动画样式。在这个动画中，我们为圆形物体创建了平滑、流动和柔软的效果，使其看起来像一个粘球。这种动画类型可以为网站增添趣味和吸引力。通过以下步骤，我们可以轻松地用 HTML 和 CSS 创建粘球动画。

步骤 1 - 创建粘球动画的 HTML 代码

首先，我们创建用于创建粘球动画的 HTML 结构。

步骤 2 - 添加 CSS 样式

在此步骤中，我们为球添加 CSS 样式，使其看起来像一个圆形。为了创建球，我们设置了球的宽度和高度，并将 border-radius 设置为 50%，使其呈现圆形。

步骤 3:创建关键帧

在这里，我们将为动画创建关键帧。关键帧用于指定动画中不同点的 CSS 属性值。

步骤 4:应用动画

最后，我们将动画应用于小球。

通过这些简单的步骤，我们可以轻松地使用 HTML 和 CSS 创建一个基本的粘球动画。我们可以通过更改 CSS 属性值、关键帧和动画时长来自定义动画。

示例 1

带有背景颜色变化的粘球动画。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 50vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background-color: #40e0d0;
      }
      @keyframes gooey {
         0% { transform: scale(1); background-color: #40e0d0; }
         50% { transform: scale(1.5); background-color: #ff00ff; }
         100% { transform: scale(1); background-color: #40e0d0; }
      }
      .ball {
         animation: gooey 2s infinite ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with Background Color Change</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

在上面的例子中，我们创建了一个不断重复的球。

示例 2

这是一个使用 HTML 和 CSS 创建带有跳跃球的粘性球动画的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 70vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background:radial-gradient(yellow, green, red);
      }
      @keyframes jump {
         0% {transform: translateY(0);}
         50% {transform: translateY(-50px);}
         100% {transform: translateY(0);}
      }
      .ball {
         animation: gooey 2s infinite ease-in-out, jump 2s infinite
         ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with a Jumping ball</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

在上面的例子中，我们定义了 gooey 和 jump 两个关键帧。gooey 关键帧负责将球从原始大小缩放到 1.5 倍，然后再缩放回来。jump 关键帧负责调整球的垂直位置，使其上下跳跃。这两个动画都应用于球元素，持续时间为 2 秒，并采用 ease-in-out 缓动效果。