如何用CSS实现类似Clash Royale的动态发光文字效果？

当然可以结合静态发光与动态动画来实现目标效果，以下是具体实现方案：

核心实现思路 #

• 基于text-shadow构建多层静态光晕，模拟游戏中厚重的发光质感
• 叠加CSS @keyframes动画，让光晕的模糊度、透明度周期性变化，实现动态呼吸/闪烁效果

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
.cr-glow-text {
  font-family: 'Arial Black', sans-serif;
  font-size: 4rem;
  color: #ffd700; /* 基础金色文字 */
  /* 静态基础光晕 */
  text-shadow: 
    0 0 5px #ffd700,
    0 0 10px #ffd700,
    0 0 15px #ff9800,
    0 0 20px #ff9800;
  /* 绑定动画 */
  animation: cr-glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes cr-glow-pulse {
  0% {
    /* 初始状态：光晕较弱 */
    text-shadow: 
      0 0 5px #ffd700,
      0 0 10px #ffd700,
      0 0 15px #ff9800,
      0 0 20px #ff9800,
      0 0 25px rgba(255, 152, 0, 0.5);
  }
  100% {
    /* 峰值状态：光晕增强、扩散 */
    text-shadow: 
      0 0 10px #ffd700,
      0 0 20px #ffd700,
      0 0 30px #ff9800,
      0 0 40px #ff9800,
      0 0 50px rgba(255, 152, 0, 0.8);
  }
}
</style>
</head>
<body>
<h1 class="cr-glow-text">CLASH ROYALE</h1>
</body>
</html>

关键细节说明 #

• 静态光晕层：多层不同颜色、模糊半径的text-shadow叠加，模拟游戏中从内到外的金色→橙色渐变发光
• 动态动画：cr-glow-pulse动画通过交替改变text-shadow的模糊半径和透明度，实现光晕的呼吸效果；infinite alternate让动画来回循环
• 字体适配：选用粗体无衬线字体，匹配游戏的硬朗视觉风格

自定义调整方向 #

• 修改animation的时长（比如把2s改成1.5s），调整动画节奏
• 替换text-shadow中的颜色值，适配不同的文字主题色
• 增加动画帧，加入颜色渐变、位置偏移等效果，模拟更复杂的闪烁或流动发光

内容的提问来源于stack exchange，提问作者Drive4Code