通过@keyframes定义动画，结合transform: translateY和text-shadow，可实现文字上下浮动并伴随阴影变化的效果；首先创建名为floatText的关键帧动画，使文字从原位置移动至上方-10px，同时阴影由0 5px 10px rgba(0,0,0,0.3)变为0 15px 20px rgba(0,0,0,0.1)，再恢复原状，形成循环；接着将该动画应用到目标文本，设置animation: floatText 3s ease-in-out infinite，实现持续3秒的缓动循环动画；还可通过:hover状态缩短动画时长为2s，并增强阴影效果，提升交互反馈；适用于标题、按钮等需要吸引注意的场景，避免用于大段文本，建议搭配透明或渐变背景以增强视觉层次。
文字浮动和阴影变化的动画效果，可以通过 @keyframes 结合 transform: translateY 和 text-shadow 实现。这种组合常用于营造轻盈、动态的视觉体验，比如标题悬停提示、欢迎语动效等。
1. 定义关键帧动画 @keyframes
使用 @keyframes 创建一个循环的动画序列，控制位移与阴影的变化。
例如：让文字轻微上下浮动，同时阴影随之变大缩小，模拟“漂浮”感。
@keyframes floatText {
0% {
transform: translateY(0);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
50% {
transform: translateY(-10px);
text-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
}
100% {
transform: translateY(0);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
}
2. 应用动画到文本元素
将定义好的动画绑定到目标文字上，并设置持续时间、重复方式等参数。
立即学习“前端免费学习笔记（深入）”；
.floating-text {
font-size: 2rem;
font-weight: bold;
color: #fff;
animation: floatText 3s ease-in-out infinite;
}
说明：
- animation: floatText 3s ease-in-out infinite; 表示使用名为 floatText 的动画，周期为 3 秒，缓动效果为 ease-in-out，并无限循环。
- 应用该类的文本会持续上下微移，并伴随阴影扩散与收缩，产生立体浮动感。
3. 可选增强：配合:hover 提升交互感
可以添加鼠标悬停时的强化效果，提升用户互动体验。
.floating-text:hover {
animation-duration: 2s;
text-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}
当用户将鼠标移入文字区域，动画节奏加快，阴影更柔和延展，增强反馈感。
4. 实际应用场景建议
- 适用于网站标题、按钮标签、引导语等需要吸引注意力的位置。
- 避免在大量文本中使用，以免干扰阅读。
- 搭配背景透明或渐变背景，视觉效果更佳。
