CSS mask 实现鼠标跟随镂空效果

HTML

CSS

body{

margin: 0;
height: 100vh;
display: grid;
place-content: center;

}
.prew{

display: block;
width: 800px;

}
.wrap{

position: relative;
overflow:hidden;

}
.wrap::before{

content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'%3E%3C/path%3E %3C/svg%3E"), linear-gradient(red, red);
  -webkit-mask-size: 100px, 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--x, .5) * 100% + var(--x, .5) * 100px - 50px )  calc(var(--y, .5) * 100% + var(--y, .5) * 100px - 50px ), 0;
  -webkit-mask-composite: xor; 
  mask-composite: exclude;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(5px)

}

JS

img.addEventListener('mousemove', (ev) => {

img.style.setProperty('--x', ev.offsetX / ev.target.offsetWidth);
img.style.setProperty('--y', ev.offsetY / ev.target.offsetHeight);

})