如何在CSS中制作文字阴影渐变_text-shadow @keyframes实现-css教程-PHP中文网

如何在CSS中制作文字阴影渐变_text-shadow @keyframes实现

P粉602998670

发布： 2025-11-28 20:48:45

原创

381人浏览过

通过叠加多层text-shadow并结合@keyframes动画，可实现文字的动态发光、呼吸或彩色渐变光晕效果，1. 使用不同模糊半径的同色阴影模拟光晕，2. 利用rgba透明度与关键帧实现脉冲动画，3. 叠加多色阴影创造霓虹灯风格，4. 建议控制模糊强度、使用深色背景、调整动画周期以优化性能与视觉体验。

如何在css中制作文字阴影渐变_text-shadow @keyframes实现

文字阴影渐变效果可以通过结合 CSS 的 text-shadow 与 @keyframes 动画实现，让文字看起来具有动态发光、浮动或呼吸感。虽然 text-shadow 本身不支持渐变色，但通过叠加多层阴影并配合动画，可以模拟出类似渐变光晕的视觉效果。

1. 基础 text-shadow 多层阴影设置

要实现“渐变”般的阴影，关键是使用多个不同颜色和模糊半径的 text-shadow 叠加。例如：

.glow-text {
  color: #fff;
  text-shadow:
    0 0 5px #ff00a0,
    0 0 10px #ff00a0,
    0 0 20px #ff00a0,
    0 0 40px #ff00a0;
}

登录后复制

这种写法通过重复同一颜色但增加模糊值，形成由内到外逐渐扩散的“光晕”效果，视觉上接近渐变。

2. 使用 @keyframes 制造动态变化

为了让阴影“动”起来，比如产生呼吸或脉冲效果，可以使用 @keyframes 改变 text-shadow 的模糊强度或颜色透明度。

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

Kits AI

Kits.ai 是一个为音乐家提供一站式AI音乐创作解决方案的网站，提供AI语音生成和免费AI语音训练

492

查看详情

@keyframes pulse-glow {
  0% {
    text-shadow:
      0 0 5px rgba(255, 0, 160, 0.5),
      0 0 10px rgba(255, 0, 160, 0.5),
      0 0 15px rgba(255, 0, 160, 0.5);
  }
  100% {
    text-shadow:
      0 0 10px rgba(255, 0, 160, 0.8),
      0 0 20px rgba(255, 0, 160, 0.8),
      0 0 30px rgba(255, 0, 160, 0.8);
  }
}

.pulse-text {
  color: #fff;
  animation: pulse-glow 1.5s ease-in-out infinite alternate;
}

登录后复制

这里利用 rgba() 控制颜色透明度，并在关键帧中改变模糊半径和透明度，实现柔和的明暗脉动。

3. 模拟彩色渐变光效

若想让文字阴影呈现多种颜色的渐变光圈，可手动叠加不同颜色的阴影：

.rainbow-glow {
  color: #ffffff;
  text-shadow:
    0 0 10px #f00,
    0 0 20px #ff7b00,
    0 0 30px #ff0,
    0 0 40px #0f0,
    0 0 50px #00f;
  animation: rainbow-pulse 2s infinite alternate;
}

@keyframes rainbow-pulse {
  from {
    text-shadow:
      0 0 5px #f00,
      0 0 10px #ff7b00,
      0 0 15px #ff0,
      0 0 20px #0f0,
      0 0 25px #00f;
  }
  to {
    text-shadow:
      0 0 15px #f00,
      0 0 30px #ff7b00,
      0 0 45px #ff0,
      0 0 60px #0f0,
      0 0 75px #00f;
  }
}

登录后复制

此方法适合用于霓虹灯风格的文字标题，搭配深色背景效果更佳。