如何为CSS波浪线条添加渐变色且不改变背景颜色

要给矢量波浪线添加渐变且不改变背景色，我们可以利用CSS的mask属性，将波浪形状作为遮罩，让下方的线性渐变透过遮罩显示出来。修改后的代码如下：

修改后的CSS代码 #

.wave {
  --grad: linear-gradient(90deg, #BEA036, #FFD700, #BEA036); /* 自定义渐变配色 */
  --t: 5px;
  /* 线条粗细 */
  --h: 50px;
  /* 波浪高度 */
  --w: 120px;
  /* 波浪单元宽度 */
  --p: 13px;
  /* 位置修正值，调整其他参数时需对应修改 */
  margin: 5px auto;
  width: calc(var(--w)*4);
  height: calc(var(--h) + 10px);
  overflow: hidden;
  position: relative;
  background: var(--grad); /* 设置渐变背景 */
  background-size: 200% 100%; /* 适配流动动画的尺寸 */
  animation: gradMove 3s infinite linear;
}

.wave:before {
  content: "";
  position: absolute;
  padding: 5px 0;
  top: 0;
  left: 0;
  width: 200%;
  bottom: 0;
  /* 将原背景样式转为遮罩，用黑色填充（遮罩仅识别透明度） */
  mask-image: radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, #000 50% calc(50% + var(--t)), transparent calc(52% + var(--t))), radial-gradient(farthest-side at 50% calc(0% - var(--p)), transparent 47%, #000 50% calc(50% + var(--t)), transparent calc(52% + var(--t)));
  mask-size: var(--w) var(--h);
  mask-position: calc(var(--w)/2) calc(-1*(var(--h)/2)), 0px calc(var(--h)/2);
  mask-repeat: repeat-x;
  mask-origin: content-box;
  background: #000; /* 遮罩填充色，只要是实色即可，不影响最终显示 */
  animation: move 3s infinite linear;
}

@keyframes move {
  to {
    transform: translateX(-50%);
  }
}

@keyframes gradMove {
  to {
    background-position: -200% 0; /* 让渐变与波浪同步流动 */
  }
}

修改后的HTML代码 #

<div>
  <div class="wave" style="--w: 21px;--h: 6px;--p: 6px;--t: 5px;transform: matrix(-0.99, -0.16, -0.16, 0.99, 0, 0);"></div>
  <div class="wave" style="--w: 21px;--h: 6px;--p: 6px;--t: 5px;transform: matrix(-0.99, -0.16, -0.16, 0.99, 0, 0);"></div>
  <div class="wave" style="--w: 21px;--h: 6px;--p: 6px;--t: 5px;transform: matrix(-0.99, -0.16, -0.16, 0.99, 0, 0);"></div>
</div>

关键改动说明 #

• 移除原单一颜色变量--c，替换为--grad渐变变量，可自由调整渐变方向和配色
• 将.wave:before的背景样式改为遮罩（mask-image），通过遮罩保留波浪形状，显示下方的渐变背景
• 新增gradMove动画，让渐变与波浪的移动同步，增强动态视觉效果
• 保留原波浪的动画和变换属性，确保波浪形态、运动方式不变

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