如何通过css实现文字渐变过渡动画

P粉602998670 2025-10-21 00:00:00 次阅读

实现文字渐变动画需先设置background-clip: text与渐变背景，再通过@keyframes改变background-position，配合animation实现流动效果，注意使用-webkit-background-clip兼容Safari。

要实现文字的渐变过渡动画，核心是结合CSS的background-clip、-webkit-background-clip和@keyframes来控制文字颜色的视觉变化。下面一步步说明如何实现。

1. 设置背景渐变并裁剪到文字区域

使用渐变背景，并通过background-clip: text让背景只显示在文字内部，再配合-webkit-background-clip确保浏览器兼容性。

.gradient-text {
  background-image: linear-gradient(45deg, #ff7a00, #ff0080, #c800ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 48px;
  font-weight: bold;
}

2. 添加渐变位置动画

通过改变background-position属性，让渐变“流动”起来，从而产生动画效果。

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.gradient-text {
background-image: linear-gradient(45deg, #ff7a00, #ff0080, #c800ff);
background-size: 200% 200%; / 扩大背景范围，使移动更平滑 /
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradientShift 3s ease infinite;
}