如何用CSS/HTML实现带上下Gradient Mask的Vertical Scrolling Marquee？

当然可以！完全只用CSS和HTML就能实现你要的效果——给全屏背景的垂直滚动Marquee同时添加顶部和底部的渐变遮罩，让文本从遮罩后方穿过，且保持居中显示。我给你分享两种实用的实现方案：

方法一：使用CSS Mask属性（推荐） #

这个方法直接作用于滚动文本本身，通过mask-image属性实现上下渐变遮罩，代码简洁且效果精准。

完整代码示例 #

<div class="marquee-container">
  <div class="marquee-content">
    这是垂直滚动的文本内容 • 可以添加更多内容测试效果 • 比如很长的句子也没问题
  </div>
</div>

/* 全屏背景容器 */
.marquee-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #1a1a1a; /* 替换成你的全屏背景色/图 */
}

/* 滚动文本样式 */
.marquee-content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  white-space: nowrap; /* 保持文本单行 */
  color: #fff;
  font-size: 2.5rem;
  padding: 1rem;
  /* 核心：上下渐变遮罩 */
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,1) 15%, /* 顶部15%区域从透明过渡到完全可见 */
    rgba(255,255,255,1) 85%, /* 中间70%区域完全可见 */
    transparent 100% /* 底部15%区域从完全可见过渡到透明 */
  );
  /* 兼容webkit内核浏览器 */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,1) 15%,
    rgba(255,255,255,1) 85%,
    transparent 100%
  );
  /* 垂直滚动动画 */
  animation: scrollVertical 12s linear infinite;
}

/* 定义垂直滚动动画 */
@keyframes scrollVertical {
  0% {
    transform: translateX(-50%) translateY(100%); /* 初始位置在容器底部外 */
  }
  100% {
    transform: translateX(-50%) translateY(-100%); /* 滚动到容器顶部外 */
  }
}

关键说明 #

• 你可以调整渐变中的百分比数值（比如15%和85%）来控制遮罩过渡区域的大小，数值越小过渡越窄，反之则越宽。
• mask-image属性会让文本在渐变透明的区域逐渐消失，完美模拟“从遮罩后方穿过”的效果。

方法二：使用伪元素创建遮罩层 #

如果需要兼容更旧的浏览器，或者希望遮罩层独立于文本内容，可以用容器的伪元素(::before/::after)来创建上下两个遮罩层。

完整代码示例 #

<div class="marquee-container">
  <div class="marquee-content">
    这是垂直滚动的文本内容 • 可以添加更多内容测试效果 • 比如很长的句子也没问题
  </div>
</div>

/* 全屏背景容器 */
.marquee-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #1a1a1a; /* 替换成你的全屏背景色/图 */
}

/* 顶部遮罩层 */
.marquee-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15%; /* 遮罩高度 */
  background: linear-gradient(to bottom, #1a1a1a, transparent); /* 从背景色过渡到透明 */
  z-index: 1; /* 确保遮罩在文本上方 */
}

/* 底部遮罩层 */
.marquee-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15%; /* 遮罩高度 */
  background: linear-gradient(to top, #1a1a1a, transparent); /* 从背景色过渡到透明 */
  z-index: 1; /* 确保遮罩在文本上方 */
}

/* 滚动文本样式 */
.marquee-content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  white-space: nowrap;
  color: #fff;
  font-size: 2.5rem;
  padding: 1rem;
  animation: scrollVertical 12s linear infinite;
}

/* 定义垂直滚动动画 */
@keyframes scrollVertical {
  0% {
    transform: translateX(-50%) translateY(100%);
  }
  100% {
    transform: translateX(-50%) translateY(-100%);
  }
}

关键说明 #

• 伪元素的背景色要和容器的全屏背景色保持一致，这样遮罩层才会和背景融合。
• 通过调整height属性可以控制遮罩层的高度，灵活度很高。

两种方案都能完美实现你的需求，你可以根据自己的浏览器兼容需求和代码偏好选择其中一种~

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