我想为我的公司创建一个奇特的英雄板块.我正在使用剪辑路径和一些JS来实现鼠标移动时的喷漆效果，它在VCS预览中工作得很好.然而，当我在Chrome、Mozilla或Edge等网络浏览器中try 时，它不起作用.似乎找不到光标的位置.剪辑路径会在随机的位置显示几秒钟，或者根本不显示. 更重要的是?如果是左角，没有边距:汽车；这是很好的工作，但它必须是中心.
我想要使用的页面:https://hoffmannteile.de/ 下面是我使用的代码(它必须在一个文件中，因为它是一个封闭的CMS):
document.addEventListener('DOMContentLoaded', function () {
const cars = document.querySelectorAll('.car');
cars.forEach(car => {
car.addEventListener('mousemove', function (e) {
const x = e.pageX - car.offsetLeft;
const y = e.pageY - car.offsetTop;
car.style.setProperty('--x', x + 'px');
car.style.setProperty('--y', y + 'px');
});
});
});.paint {
max-height: 338px;
max-width: 600px;
margin: auto;
}
.malowanie {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.cont {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cont .car {
position: relative;
height: 338px;
width: 600px;
background-image: url('https://composer.idosell.com/gfx/30226/SprinterWhite.png');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.cont .car::before {
content: '';
position: absolute;
z-index: 1;
}
.cont .car::after {
content: '';
position: absolute;
inset: 0;
background: var(--img);
background-size: cover;
clip-path: circle(0px at 0 0);
z-index: 2;
transition: clip-path 0.15s;
}
.cont .car:hover::after {
clip-path: circle(100px at var(--x) var(--y));
cursor: url('https://composer.idosell.com/gfx/30226/paint-spray-icon.svg'), auto;
}<section class="paint">
<div class="malowanie">
<div class="cont">
<div class="car" style="--img: url('https://composer.idosell.com/gfx/30226/SprinterRedHof.png')"></div>
</div>
</div>
</section>