CSS动画如何实现文字颜色渐变_color与@keyframes组合应用-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-30 20:07:34

原创

299人浏览过

答案：通过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%;
  }
}

登录后复制

将动画应用到文字：

秒哒

秒哒-不用代码就能实现任意想法

349

查看详情

立即学习“前端免费学习笔记（深入）”；

.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;
}

登录后复制

说明：