如何用CSS linear-gradient实现video.js进度条指定小点透明效果？

方案可行性 #

完全可以用CSS linear-gradient实现进度条指定位置透明的效果，通过动态生成渐变段，在章节标记位置预留透明区域，透出白色标记点，完美匹配预期效果。

具体实现步骤 #

1. 修正DOM结构 #

先把标记点嵌套到对应章节标记容器内，保证位置精准对应：

<div class="vjs-slider">
  <div class="vjs-marker" style="left: 55.3719%;">
    <div class="vjs-marker-dot"></div>
  </div>
  <div class="vjs-marker" style="left: 6.61157%;">
    <div class="vjs-marker-dot"></div>
  </div>
</div>

2. 基础样式设置 #

给进度条和标记点设置基础样式：

/* 进度条容器 */
.vjs-slider {
  position: relative;
  width: 100%;
  height: 6px; /* 进度条高度可按需调整 */
  overflow: hidden;
}

/* 章节标记定位容器 */
.vjs-marker {
  position: absolute;
  top: 0;
  left: var(--marker-left);
  height: 100%;
  width: 0;
}

/* 白色标记点 */
.vjs-marker-dot {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 8px; /* 标记点直径，需和JS计算值一致 */
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
  z-index: 1;
}

3. 动态生成渐变透明效果 #

因为章节标记位置是动态的，需要用JS计算并生成linear-gradient样式：

// 获取进度条和所有标记
const slider = document.querySelector('.vjs-slider');
const markers = document.querySelectorAll('.vjs-marker');
const dotWidth = 8; // 和CSS中标记点直径一致
const sliderWidth = slider.offsetWidth;
const dotPercent = (dotWidth / sliderWidth) * 100;
const halfDotPercent = dotPercent / 2;

// 构建渐变片段数组
const gradientSegments = ['#cccccc 0%'];

markers.forEach((marker, index) => {
  const markerLeft = parseFloat(marker.style.left);
  const transparentStart = markerLeft - halfDotPercent;
  const transparentEnd = markerLeft + halfDotPercent;

  // 添加灰色段到透明区域起点
  gradientSegments.push(`#cccccc ${transparentStart}%`);
  // 添加透明段
  gradientSegments.push(`transparent ${transparentStart}%`);
  gradientSegments.push(`transparent ${transparentEnd}%`);
  
  // 处理后续灰色段
  if (index === markers.length - 1) {
    gradientSegments.push(`#cccccc ${transparentEnd}%`);
    gradientSegments.push(`#cccccc 100%`);
  } else {
    const nextMarkerLeft = parseFloat(markers[index + 1].style.left);
    gradientSegments.push(`#cccccc ${transparentEnd}%`);
    gradientSegments.push(`#cccccc ${nextMarkerLeft - halfDotPercent}%`);
  }
});

// 拼接并设置渐变背景
const gradient = `linear-gradient(90deg, ${gradientSegments.join(', ')})`;
slider.style.background = gradient;

4. 适配动态场景 #

如果窗口 resize 或章节标记动态增减，重新调用上述JS逻辑即可更新渐变样式。

效果说明 #

通过这种方式，进度条会在每个章节标记位置出现透明小圆洞，透出白色标记点，实现“标记点嵌在进度条内”的视觉效果，替代当前标记点浮在进度条上的样式。

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