设计给出的样式是这样的:
毛笔的位置是当前的进度,毛笔左侧的部分为橘黄色,右侧为灰色。这里我抛砖引玉,列举三个实现方法。
方法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>
上述代码的效果是这样的: