答案：通过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 的值，让元素在垂直方向来回偏移。
注意：偏移单位推荐使用 px 或 rem，避免用百分比导致浮动幅度受容器影响。@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;
}关键属性说明：
立即学习“前端免费学习笔记（深入）”；
- 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 的配合，就能轻松做出自然的文字浮动效果，不复杂但容易忽略细节控制。
