mask-image 鼠标跟随颜色变化

  .ins_productCon3 { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; --left: 0;

.img_box { width: 100%; height: 5rem; background: #e5e5e5;

mask-image: url(../images/bg7.png); mask-size: 100% auto; position: relative; z-index: 1;

&::after { content:''; position: absolute; width: 30%; height: 100%; background:linear-gradient(90deg, #ff000000 0%, #ff0000 , #ff000000,); left: var(--left); bottom: 0; transform: translateX(-50%); }

}

}

 

 

 

function ins_productCon3() {

var box = $('.ins_productCon3');

if (box.length) {

let hoverBox = box.find('.img_box');

hoverBox.on('mousemove', function(e) {

box.css({ "--left": e.clientX + "px", })

});

}

}

ins_productCon3();

 

<section class="ins_productCon3">

<!-- 占位最好是按照内容来哈，我这里没有内容就写死了 -->

<div class="img_box"></div>

</section>