如何实现带左右边缘淡入淡出效果的透明背景CSS Marquee

云上老周

2026-8-3

实现背景透明的边缘羽化CSS跑马灯（淡入淡出效果）

要实现不依赖背景色的文字边缘羽化淡入淡出跑马灯，核心是用CSS mask 属性替代原来的纯色渐变遮罩，这样背景可以完全透明，只对文字应用透明度遮罩效果。

修改后的完整代码

div#container {
  width: 60%;
  height: 100%;
  position: absolute;
  /* 移除背景色，保持透明 */
}

div#marquee-container {
  overflow: hidden;
  /* 关键：用mask实现左右边缘的透明度遮罩 */
  mask: linear-gradient(to right, 
    transparent 0%, 
    black 15%, 
    black 85%, 
    transparent 100%);
  /* 兼容webkit内核浏览器 */
  -webkit-mask: linear-gradient(to right, 
    transparent 0%, 
    black 15%, 
    black 85%, 
    transparent 100%);
}

p#marquee {
  animation: scroll-left 10s linear infinite;
  margin: 0; /* 清除默认边距避免错位 */
}
            
@keyframes scroll-left {
  0%   {transform: translateX(140%)}
  100% {transform: translateX(-140%)}
}

<div id="container">
  <div id="marquee-container">
    <p id="marquee">The quick brown fox jumps over the lazy dog</p>
    <!-- 移除原来的marquee-cover元素 -->
  </div>
</div>

关键说明

CSS Mask的作用：mask 属性可以控制元素的可见区域，这里的渐变中：
- transparent 表示完全透明区域（文字在这里逐渐淡出）
- black 表示完全不透明区域（文字正常显示）
- 左右15%的渐变过渡区域就是文字的羽化淡入淡出效果，你可以调整百分比来改变羽化的宽度。
兼容性处理：添加-webkit-mask兼容Chrome、Safari等webkit内核浏览器。
背景透明：移除了容器的背景色，跑马灯区域的背景完全透明，不会遮挡页面其他内容。
移除冗余元素：不需要再用marquee-cover遮罩层，mask直接作用在容器上，更简洁。