文字颜色渐变动画实现方法

.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ff7e5f);
  background-size: 200% 200%; /* 扩大背景范围用于动画 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* 兼容性处理 */
}

@keyframes gradient-move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
<p>.gradient-text {
animation: gradient-move 3s ease infinite;
}</p>

<style>
  .animated-gradient-text {
    font-size: 60px;
    font-weight: bold;
    background-image: linear-gradient(45deg, #ff416c, #ff4b2b, #ff7e5f, #feb47b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradient-move 4s ease-in-out infinite;
  }
<p>@keyframes gradient-move {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style></p><p><p class="animated-gradient-text">渐变文字动画</p></p>