关于javascript:CSS-mask-实现鼠标跟随镂空效果

HTML

<div class="wrap" id="img">

<img class="prew" src="https://tva1.sinaimg.cn/large/008i3skNgy1gubr2sbyqdj60xa0m6tey02.jpg">

</div>

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

})