如何使用JavaScript实现文字背景动画？用于个人作品集网站

这种效果的核心是用文字作为裁剪容器，让渐变背景在文字范围内流动，下面是具体实现步骤：

1. 基础HTML结构 #

只需要一个包含文字的元素，比如标题：

<h1 class="animated-text">我的个人作品集</h1>

2. CSS核心实现 #

通过background-clip: text属性让渐变背景只显示在文字区域，再配合background-position的动画实现流动效果：

.animated-text {
  /* 基础文字样式 */
  font-size: 6rem;
  font-weight: 800;
  font-family: sans-serif;
  
  /* 核心：渐变背景 + 文字裁剪 */
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f59e0b, #6366f1);
  background-size: 200% 100%; /* 让渐变宽度超出文字，实现滚动效果 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 隐藏原文字颜色，露出渐变背景 */
  
  /* 流动动画 */
  animation: gradient-flow 4s linear infinite;
}

/* 动画关键帧：让渐变背景横向滚动 */
@keyframes gradient-flow {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

3. 自定义适配 #

• 调整渐变色彩：替换linear-gradient里的颜色值，匹配你的作品集主题色，可添加更多颜色节点丰富效果
• 动画速度：修改animation中的4s，数值越小动画越快，反之越慢；把linear换成ease-in-out可实现快慢变化的流动
• 文字样式：修改font-size、font-weight、font-family等，适配页面布局
• 添加描边：如果需要文字边缘更清晰，可添加-webkit-text-stroke: 1px #222;（兼容WebKit内核浏览器）或text-stroke: 1px #222;（标准属性）

兼容性说明 #

• background-clip: text需要添加-webkit-前缀兼容Chrome、Safari等WebKit内核浏览器
• 若需兼容更旧浏览器，可改用mask属性实现文字遮罩效果（需要额外定义SVG遮罩）

内容的提问来源于stack exchange，提问作者ZeMane