使用CSS的linear-gradient结合background-clip和animation可实现文字颜色渐变动画。1. HTML中为h1标签添加gradient-text类；2. CSS设置background-image为45度渐变色，指定background-size为300%以增强动画流畅性，利用-webkit-background-clip: text和background-clip: text使背景填充文字，配合-webkit-text-fill-color: transparent让文字透明从而显示背景，通过animation调用@keyframes定义的gradient-animation实现背景位置循环移动；3. 动画关键帧从0%到50%再到100%改变background-position，形成流动效果。调整颜色、方向或时长可适配不同设计需求。
想实现一个简单的文字颜色渐变动画，可以用 CSS 的 linear-gradient 配合 background-clip 和 animation 属性来完成。下面是一个基础但效果很明显的项目示例。
1. HTML 结构
给一个标题添加类名，便于样式控制：<h1 class="gradient-text">渐变文字动画</h1>
2. CSS 样式与动画
设置背景渐变，将文字“镂空”显示背景，并通过 animation 不断改变背景位置，实现动态流动效果。
立即学习“前端免费学习笔记（深入）”；
.gradient-text {
font-size: 4rem;
font-weight: bold;
background-image: linear-gradient(45deg, #ff7a00, #ff0080, #c700ff);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-animation 4s ease infinite;
}
<p>@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}</p>3. 关键点说明
- background-clip: text：让背景只显示在文字区域内（需配合 -webkit- 前缀兼容浏览器）
- -webkit-text-fill-color: transparent：确保文字本身透明，才能看到背景
- background-size: 300%：扩大背景尺寸，使动画移动更平滑
- animation：通过改变 background-position 实现流动感
基本上就这些，不复杂但视觉效果很吸引人。你可以调整颜色、方向、动画速度来适配自己的项目风格。
