如何使用 CSS 创建跳跃文本 3D 动画效果？

CSS 可以创建各种令人惊叹的效果，包括跳跃文本 3D 动画效果。这个效果可以给网站带来很棒的视觉效果，让网站更具吸引力。

下面是如何使用 CSS 创建跳跃文本 3D 动画效果的步骤：

第 1 步：基本 HTML 结构

首先，在 HTML 中创建一个带有文字的容器，如下所示：

<div class="container">
  <h2>JUMPING TEXT</h2>
</div>

第 2 步：CSS 样式

接下来，使用 CSS 样式来创建 3D 动画效果。首先，将容器设置成透视视图：

.container {
  perspective: 800px;
}

接着，将 h2 元素设置成绝对定位，并将其旋转：

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(90deg);
}

这将使 h2 元素在初始状态下在文本框上方，并在 x 轴上旋转 90 度。

下一步是应用关键帧动画。使用以下 CSS 样式来定义动画：

@keyframes jump {
  0% {
    transform: translate(-50%, -50%) rotateX(90deg);
  }
  25% {
    transform: translate(-50%, -60%) rotateX(45deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateX(0deg);
  }
  75% {
    transform: translate(-50%, -40%) rotateX(-45deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(-90deg);
  }
}

h2 {
  animation: jump 2s ease-in-out infinite;
}

这定义了一个名为“jump”的关键帧动画，并将其应用于 h2 元素。动画将持续 2 秒，具有 ease-in-out 缓动效果，并无限重复。

在关键帧动画中，元素将按以下方式转换：

• 0%：初始状态，元素位于文本框之上并以 90 度角度旋转。
• 25%：元素向上跳跃，同时旋转至 45 度角度。
• 50%：元素向下返回原位置，不旋转。
• 75%：元素再次跳跃，同时旋转至 -45 度角度。
• 100%：元素回到初始状态，以 90 度角度旋转并位于文本框之上。

最后，添加一些额外的 CSS 样式来修饰文本：

h2 {
  color: #fff;
  font-size: 80px;
  text-transform: uppercase;
  letter-spacing: 10px;
}

完整代码

下面是完整的 HTML 和 CSS 代码：

<div class="container">
  <h2>JUMPING TEXT</h2>
</div>

.container {
  perspective: 800px;
}

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(90deg);
  color: #fff;
  font-size: 80px;
  text-transform: uppercase;
  letter-spacing: 10px;
  animation: jump 2s ease-in-out infinite;
}

@keyframes jump {
  0% {
    transform: translate(-50%, -50%) rotateX(90deg);
  }
  25% {
    transform: translate(-50%, -60%) rotateX(45deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateX(0deg);
  }
  75% {
    transform: translate(-50%, -40%) rotateX(-45deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(-90deg);
  }
}

现在，保存并查看您的网页，您应该看到一个以 3D 动画效果跳跃的文本！