CSS动画如何实现文字浮动和阴影变化_transform translateY text-shadow @keyframes组合-css教程-PHP中文网

CSS动画如何实现文字浮动和阴影变化_transform translateY text-shadow @keyframes组合

P粉602998670

发布： 2025-11-30 17:42:02

原创

817人浏览过

通过@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，并增强阴影效果，提升交互反馈；适用于标题、按钮等需要吸引注意的场景，避免用于大段文本，建议搭配透明或渐变背景以增强视觉层次。

css动画如何实现文字浮动和阴影变化_transform translatey text-shadow @keyframes组合

文字浮动和阴影变化的动画效果，可以通过 @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. 应用动画到文本元素

将定义好的动画绑定到目标文字上，并设置持续时间、重复方式等参数。

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

讯飞开放平台

科大讯飞推出的以语音交互技术为核心的AI开放平台

152

查看详情

.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. 实际应用场景建议

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

基本上就这些，不复杂但容易忽略细节。关键是让 transform 和 text-shadow 在关键帧中协同变化，形成自然流畅的浮动氛围。

以上就是CSS动画如何实现文字浮动和阴影变化_transform translateY text-shadow @keyframes组合的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css背景中有哪些方法 css中justify-content属性是什么 css中link和@import的区别 css权重的计算规则 css中first-letter是什么