如何通过css animation制作文字上下浮动效果

答案：通过CSS @keyframes定义上下移动的关键帧动画，结合transform: translateY()实现文字浮动效果。首先创建名为float的动画，使元素在0%到50%到100%之间垂直偏移，推荐使用px或rem单位；然后将动画应用到目标文字元素，设置animation为2s ease-in-out infinite，确保无限循环且运动自然；最后可通过animation-delay为不同文字设置延迟，形成错落有致的浮动节奏，提升视觉层次感。

要实现文字上下浮动的动画效果，可以通过 CSS 的 @keyframes 配合 transform: translateY() 来完成。这种效果常用于吸引注意力的标题或提示文字，下面介绍具体实现方法。

1. 定义浮动动画关键帧

使用 @keyframes 创建一个上下移动的动画过程。通过改变 translateY 的值，让元素在垂直方向来回偏移。

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

2. 应用动画到文字元素

将定义好的动画绑定到目标文字标签上，比如 h1、span 等，并设置动画时长、循环方式等参数。

.floating-text {
  display: inline-block;
  animation: float 2s ease-in-out infinite;
}

关键属性说明：

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

• animation-name: 指定使用的动画名称（如 float）
• animation-duration: 动画周期，如 2s 表示一次完整浮动耗时 2 秒
• animation-timing-function: 控制动画速度曲线，ease-in-out 让运动更自然
• animation-iteration-count: 设为 infinite 可无限循环

3. 调整视觉细节提升效果

为了让浮动更柔和真实，可以微调动画曲线或添加延迟差异，适用于多个并列文字逐个浮动。

例如使用 ease-in-out 曲线模拟重力回弹感，或对不同文字设置不同动画时长以形成错落节奏。

.floating-text:nth-child(2) {
  animation-delay: 0.2s;
}
.floating-text:nth-child(3) {
  animation-delay: 0.4s;
}

基本上就这些。只要掌握 @keyframes 和 transform 的配合，就能轻松做出自然的文字浮动效果，不复杂但容易忽略细节控制。

以上就是如何通过css animation制作文字上下浮动效果的详细内容，更多请关注php中文网其它相关文章！