使用 clip-path 实现 Web 滑动条

标题: 使用 clip-path 实现 Web 滑动条
作者: edge_sky
创建于: 2023-12-30 18:36:38
更新于: 2024-07-01 22:56:04
链接: https://edgesky.cn/2023/12/30/clip-path的使用/
版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。

clip-path属性可以创建一个只有部分可见的元素

.white-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
    pointer-events: none;
    color: white;
    z-index: 3;
    clip-path: inset(0 0 0 0);
}

在这个例子中，white-text样式添加了一个属性：clip-path，inset(0, 0, 0, 0)参数定义了一个剪切区域，上、右、下、左四个边的剪切距离

<div class="white-text" id="progressText1">0%</div>

function updateProgressBar(e) {
        let bounds = progressContainer.getBoundingClientRect();
        let x = e.pageX - bounds.left;
        let percentage = Math.max(0, Math.min(100, (x / bounds.width) * 100));
        let text = Math.round(percentage) + '%';
        progressBar.style.width = percentage + '%';
        progressMask.style.width = 100 - percentage + '%';
        progressText1.textContent = text;
        progressText1.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
        progressText2.textContent = text;
    }

右边的剪切距离为100 - percentage%，表示其显示区域与进度条一致，当进度条覆盖黑色文本时白色文本相应的显示出来，实现了变色的效果