CSS动画如何实现文字阴影变化_text-shadow与@keyframes平滑过渡-css教程-PHP中文网

CSS动画如何实现文字阴影变化_text-shadow与@keyframes平滑过渡

P粉602998670

发布： 2025-11-29 20:37:02

原创

618人浏览过

通过结合text-shadow与@keyframes可实现文字阴影的平滑动画。1. 使用@keyframes定义阴影的模糊半径、颜色等参数变化，如发光放大效果；2. 支持多层阴影同步动画，如双层脉动增强立体感；3. 可联动动画颜色与偏移，实现投影漂移等动态效果；4. 注意保持颜色格式一致、避免省略关键帧中的阴影层，并合理使用will-change提升性能，确保动画流畅兼容。

css动画如何实现文字阴影变化_text-shadow与@keyframes平滑过渡

文字阴影的平滑变化可以通过结合 text-shadow 属性与 @keyframes 实现。虽然 text-shadow 本身支持 CSS 过渡，但在某些情况下直接使用 transition 可能无法达到理想效果，尤其是多层阴影或颜色变化时。使用 @keyframes 能更精确控制动画过程。

1. 基础语法：text-shadow 与 keyframes 结合

text-shadow 接受多个参数：水平偏移、垂直偏移、模糊半径、颜色。在 @keyframes 中定义这些值的变化，可实现动态效果。

示例：简单的发光放大动画

@keyframes glow {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  }
}

.animated-text {
  font-size: 2rem;
  color: #fff;
  animation: glow 1.5s ease-in-out infinite alternate;
}

登录后复制

2. 多层阴影动态变化

可以同时改变多层阴影，比如内光晕加外扩散，增强立体感。

示例：双层阴影脉动效果

@keyframes pulseShadow {
  0% {
    text-shadow: 
      0 0 8px gold,
      0 0 12px goldenrod;
  }
  50% {
    text-shadow: 
      0 0 15px gold,
      0 0 20px goldenrod;
  }
  100% {
    text-shadow: 
      0 0 10px gold,
      0 0 15px goldenrod;
  }
}

.pulse-text {
  color: orange;
  font-weight: bold;
  animation: pulseShadow 2s ease-in-out infinite;
}

登录后复制

3. 颜色与位置联动过渡

不只是模糊值，颜色和偏移也可以动画化，制造漂浮或投影移动效果。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

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

示例：文字投影缓慢漂移

@keyframes floatShadow {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  }
  50% {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
  }
  100% {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  }
}

.float-text {
  color: #333;
  animation: floatShadow 3s ease-in-out infinite alternate;
}

登录后复制