老板说文字样式很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 技术总结 总结使用background-clip: text和text-fill-color: transparent可以实现「文字渐变效果」。搭配@keyframes可以让渐变背景「流动起来」。加上transform: scale的动画，让文字拥有「呼吸感」。 AI编程资讯AI Coding专区指南： https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文