mask遮罩配合＜input text=“range“＞实现图片切换

效果图

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;
  }

  }