CSS - 不规则图形进度条

最新推荐文章于 2023-03-18 10:44:27 发布

半吊子伯爵

最新推荐文章于 2023-03-18 10:44:27 发布

阅读量524

点赞数 1

分类专栏：前端开发文章标签： css 前端

本文链接：https://blog.csdn.net/xueshen1106/article/details/128244974

版权

前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

设计给出的样式是这样的：

毛笔的位置是当前的进度，毛笔左侧的部分为橘黄色，右侧为灰色。这里我抛砖引玉，列举三个实现方法。

方法1：镂空遮罩

用一张图片做为遮罩层，图片整体为白色，中间不规则的部分为透明色。下方是长方形的一个进度条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不规则图形进度条（1）</title>
    <style>
        h2, .controller {text-align: center;}
        .plan {margin: 150px auto 50px; width: 680px; height: 60px;}
        .plan-1 {background-color: #999;}
        .progress-bar {
            width: 0; height: 60px; max-width: 100%; position: relative; background-color: #FFBD44;
            transition: width .5s ease;
        }
        .progress-bar .mask {
            position: absolute; left: 0; top: 0; z-index: 1; width: 680px; height: 60px;
            background: url("./progress_mask.png") no-repeat 0 0; background-size: 100% 100%;
        }
        .progress-bar .brush {
            position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <h2>方法1：镂空遮罩</h2>
    <div class="plan plan-1">
        <div class="progress-bar" id="progressBar">
            <div class="mask"></div>
            <img class="brush" src="./brush.png" />
        </div>
    </div>
    <div class="controller">
        <input id="controller" type="range" min="0" max="100" value="0" />
    </div>
    <script>
        let controller = document.querySelector('#controller');
        let progressBar = document.querySelector('#progressBar');
        controller.addEventListener('change', progressChange);
        function progressChange () {
            let value = parseFloat(this.value);
            let width = Math.round(680 * value / 100);
            progressBar.style = `width: ${width}px`;
        }
    </script>
</body>
</html>

方法2：图片堆叠

用两张图片来实现，一张是灰色的，一张是橘黄色，灰色的在下方，默认显示；橘黄色在上方，高度与下方灰色图片一致，宽度方向被所在元素宽度裁切。

<style>
    h2, .controller {text-align: center;}
    .plan {margin: 150px auto 50px; width: 680px; height: 60px;}
    .plan-2 {background: url("./progress_gray.png") no-repeat 0 0; background-size: auto 100%;}
    .progress-bar {
        width: 0; height: 60px; max-width: 100%; position: relative; transition: width .5s ease;
        background: url("./progress_orange.png") no-repeat 0 0; background-size: auto 100%;
    }
    .progress-bar .brush {
        position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
        transform: translateX(100%);
    }
</style>
<body>
    <h2>方法2：图片堆叠</h2>
    <div class="plan plan-2">
        <div class="progress-bar" id="progressBar">
            <img class="brush" src="./brush.png" />
        </div>
    </div>
</body>

方法3：滤镜

用一张图片来实现，一张橘黄色的，将进度条分成左右两部分，背景图一样，只是右侧的部分使用滤镜置灰。

<style>
    h2, .controller {text-align: center;}
    .plan {margin: 150px auto 50px; width: 680px; height: 60px;}
    .plan-3 {display: flex;}
    .progress-bar {
        width: 0; height: 60px; max-width: 100%; position: relative; transition: width .5s ease;
        background: url("./progress_orange.png") no-repeat 0 0; background-size: auto 100%;
    }
    .progress-cover {
        width: 0; flex-grow: 1; filter:grayscale(1);
        background: url("./progress_orange.png") no-repeat right top; background-size: auto 100%;
    }
    .progress-bar .brush {
        position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
        transform: translateX(100%);
    }
</style>
<body>
    <h2>方法3：滤镜</h2>
    <div class="plan plan-3">
        <div class="progress-bar" id="progressBar">
            <img class="brush" src="./brush.png" />
        </div>
        <div class="progress-cover"></div>
    </div>
</body>

上述代码的效果是这样的：