效果图
mask
实现代码
//这里使用的是react
function MaskPicture{
//存储input 的range值并设置初始值为50 放在中间
const [range,setRange] = useState(50)
//改变range值
const handleChangeInput =(e: any) => {
console.log(e.target.value);
setRange(e.target.value)
}
const picture1 = {
backgroundImage: "url(https://static.cn/image/1714ffd693d4d0df3c315fd2b7f4.png)",
//确保浏览器兼容性
WebkitMaskImage: `linear-gradient(to right, #000 0, ${range}%, #0000 0)`,
maskImage:`linear-gradient(to right, #000 0, ${range}%, #0000 0)`
}
const picture2 = {
backgroundImage: "url(https://static.cn/image/3ac2bc16b25e9a62a9896ac39aa.png)",
WebkitMaskImage: `linear-gradient(to left, #000 0, ${100-range}%, #0000 0)`,
maskImage:`linear-gradient(to left, #000 0, ${100-range}%, #0000 0)`
}
return (
<div className={styles.img}>
<div className={styles.contrast_picture1} style={picture1} />
<div className={styles.contrast_picture2} style={picture2}/>
<input type="range" id="range" step="0.1" onChange={(e)=>handleChangeInput(e)}/>
</div>
)
}
// css
.img {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 86vh;
div{
position: absolute;
top: 0;
width: 61vw;
height: 82vh;
background-repeat: no-repeat;
background-size: cover;
}
input[type="range"] {
z-index: 1;
position: absolute;
top:0;
appearance: none;
width: 59vw;
height: 10vh;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]:focus{
outline:none;
}
//定制滑块样式
input[type="range"]::-webkit-slider-thumb {
z-index: 1;
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-top: 10px solid #352058;
border-left: 10px solid #352058;
border-bottom: 10px solid #b3b3b3;
border-right: 10px solid #b3b3b3;
transform: rotate(135deg);
}
//兼容浏览器
input[type="range"]::-moz-range-thumb {
z-index: 1;
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-top: 10px solid #352058;
border-left: 10px solid #352058;
border-bottom: 10px solid #b3b3b3;
border-right: 10px solid #b3b3b3;
transform: rotate(45deg);
}
//定制滑动条样式
input[type=range]::-webkit-slider-runnable-track{
width: 55vw;
height: 15px;
}
input[type=range]::-moz-range-track{
width: 55vw;
height: 15px;
}
}