CSS文字浮动与阴影效果实现技巧

文字浮动和阴影变化的动画效果，可以通过 @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. 实际应用场景建议

• 适用于网站标题、按钮标签、引导语等需要吸引注意力的位置。
• 避免在大量文本中使用，以免干扰阅读。
• 搭配背景透明或渐变背景，视觉效果更佳。