css 实现字体跳动特效 实例

下面是一个使用CSS实现字体跳动特效的示例：

HTML:

<div class="jumping-text">Hello World!</div>

CSS:

@keyframes jumping {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.jumping-text {
  font-size: 24px;
  animation: jumping 0.5s infinite;
}

在上述示例中，jumping-text 类名的文本会在垂直方向上跳动。关键帧动画 jumping 定义了字体在不同百分比时的位置，从而实现跳动效果。通过将 .jumping-text 应用动画 jumping，设置动画时长为0.5秒，并将动画设置为无限循环，文本将会不停地跳动。

你可以根据需要调整字体大小、动画时长等来自定义跳动特效。