老板说文字样式很low，那我加个渐变动画吧，闪瞎他引言这几天项目结测，老板觉得我们没事干，告诉我首页的文字太难看，想让

大家好，我是石小石！一个热爱技术分享的开源社区贡献者，小册《油猴脚本实战指南》作者。

引言

这几天项目结测，老板觉得我们没事干，告诉我首页的文字太难看，想让我自己设计设计。好，既然让我干UX的活，那我就整个花里花哨的动画，闪瞎他！

于是，我用文字渐变实现了非常炫酷的文字动画：

确实闪瞎了老板的眼，他说我写得很好，让我滚回家。

如何实现

这个效果其实实现起来很简单，就是「渐变颜色」、「背景流动」、「轻微缩放」动画效果叠加。

基础效果：文字渐变

CSS 原生并不支持给文字直接设置渐变色，但我们可以借助两个属性配合实现：

.gradient-text {
  font-size: 28px;
  background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

linear-gradient(...)：定义渐变方向与颜色。
background-clip: text：将背景裁剪为文字形状，仅支持部分浏览器（需加 -webkit-）。
text-fill-color: transparent：隐藏字体颜色，让背景填充其形状。

效果如下：

<h1 class="gradient-text">生命不息，奋斗不止，以梦为马，不负韶华。</h1>

背景偏移：流动的渐变效果

为了让背景产生「流动」的视觉效果，我们添加动画：

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

并把动画加到文字上：

animation: gradient-shift 8s ease infinite;


.gradient-text {
    font-size: 48px;
    font-weight: bold;
    background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 8s ease infinite;
}

文字的渐变色将会在 8 秒内平滑左右移动：

增加呼吸感：轻微缩放动画

为了进一步增强动感，我们可以加一个 pulse 缩放动画：

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

合并到 .gradient-text 中：

amation: gradient-shift 8s ease infinite, pulse 2s infinite alternate;

alternate 表示动画来回播放，模拟轻微“呼吸”效果。

OK，搞定！

完整代码

<style>
.gradient-text {
    font-size: 28px;
    background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 8s ease infinite, pulse 2s infinite alternate;
}

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

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}
</style>

<h1 class="gradient-text">生命不息，奋斗不止，以梦为马，不负韶华。</h1>