彩色文字添加CSS Shine闪光效果失效的问题求助

AI 小北

2026-9-28

多色文字闪光效果实现方案

核心思路

保留原有所有文字的颜色、字号属性，不通过background-clip:text修改文字填充，避免覆盖原有多色设置
用独立的伪元素作为闪光层叠加在文字上方，通过mask属性限制闪光层仅在文字区域显示，不会在文字外出现多余闪光
通过混合模式调整闪光的叠加效果，保证原有文字颜色不受影响

完整修改后代码

HTML（原有代码无需修改）

<span class="shine logoText">
  <span>Peer</span>
  <span>Anfon</span>
  <span>infrustructre</span>
</span>

CSS

/* 原有文字样式完全保留 */
.logoText span:first-child {
  color: #4361ad;
  font-size: 30px;
}
.logoText span:nth-child(2) {
  color: #dfdfdf;
  font-size: 29px;
}
.logoText span:nth-child(3) {
  font-size: 16px;
  color: #dfdfdf;
  margin-right: 5px;
}
/* 重写闪光容器样式 */
.shine {
  text-align: center;
  position: relative;
  overflow: hidden;
  /* 限制闪光仅在文字区域显示 */
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0);
}
/* 伪元素实现闪光层 */
.shine::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 自定义闪光渐变，可调整透明度改变亮度 */
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2s infinite ease-in-out;
  /* 混合模式保证不覆盖原有文字颜色 */
  mix-blend-mode: lighten;
}
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* 修复原有webkit动画的拼写错误 */
@-webkit-keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}