我想要达到的结果:
在网页里以我鼠标位置为圆心显示一个圈,这个圈的效果是显示另一个图片这个圈位置的图像,就像透视一样
<style type="text/css">
.dow {
width: 1800px;
height: 800px;
background-image: url("https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/515/515-bigskin-2.jpg");
}
img {
clip-path: circle(15% at ??? ???);
}
</style>
</head>
<body>
<div class = "dow"><img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/199/199-bigskin-4.jpg" alt = ""/></div>
<script>
const mousImg = document.querySelector("img");
document.onmousemove = function(e) {
var e = e || window.event;
var x = e.pageX;
var y = e.pageY;
mousImg.??? = x /18 * 1%;
mousImg.??? = y /8 * 1% ;
}
</script>
</body>