CSS动画如何实现文字颜色渐变_color与@keyframes组合应用

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS动画如何实现文字颜色渐变_color与@keyframes组合应用

2025-11-30

浏览次数：次

返回列表

答案：通过background-clip: text与@keyframes结合实现文字颜色渐变动画，利用背景移动营造视觉流动效果，适用于标题等高亮场景。

css动画如何实现文字颜色渐变_color与@keyframes组合应用

文字颜色渐变可以通过CSS的@keyframes和background-clip: text结合实现，因为color属性本身不支持渐变色直接过渡，但利用背景渐变配合文本裁剪就能达到视觉上的颜色渐变动效。

1. 使用 background-clip: text 实现渐变文字

将渐变设置为文本的背景，并通过background-clip: text让背景只显示在文字区域内，再配合-webkit-text-fill-color: transparent使文字本身透明，从而显示出背景渐变。

示例代码：

.gradient-text {
  background-image: linear-gradient(45deg, #ff7a00, #e94b8b);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

2. 结合 @keyframes 实现颜色循环渐变动画

定义关键帧动画，改变background-position来移动渐变背景的位置，使文字颜色产生流动变化的效果。

动画定义：

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

将动画应用到文字：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

.gradient-text {
  background-image: linear-gradient(45deg, #ff7a00, #e94b8b, #00d4ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

说明：