在WallpaperEngine上看到的一個效果，找了一些資料嘗試實現。鼠標划過顯示另一張圖片的效果是有了，但是透視邊緣的模糊效果不會做，先記錄在這，如果讀者有會的，可以留言交流一下。
想實現的效果
還原的效果
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gentle</title>
<style>
html, body {
margin: 0;
padding: 0;
}
html, body, .dress-view {
width: 100%;
height: 100%;
}
.dress-view {
background-image: url("https://images.cnblogs.com/cnblogs_com/ast935478677/1855237/o_200927050159surface.jpg");
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
border: 0;
}
.gentle-view {
position: fixed;
width: 200px; /*透視矩形長*/
height: 200px; /*透視矩形寬*/
border-radius: 100px; /*透視圓角（為長寬的一半時顯示為園）*/
background-attachment: fixed;
background-image: url("https://images.cnblogs.com/cnblogs_com/ast935478677/1855237/o_200927050206undersurface.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script type="text/javascript">
document.onmousemove = function (event) {
var gentleView = document.getElementById('gentle-view');
var mousePos = getMousePos (gentleView, 0, 0, event);
gentleView.style.display = "inline";
gentleView.style.left = mousePos.X - 100 + "px"; //這行和下一行的100對應矩形長寬的一半
gentleView.style.top = mousePos.Y - 100 + "px";
};
function getMousePos (object, x, y, event) { //鼠標定位賦值函數
var posX = 0, posY = 0; //臨時變量值
var e = event || window.event; //標准化事件對象
var scrollTop; //豎向滾動條位置
var scrollLeft; //橫向滾動條位置
if (document.body && document.body.scrollTop && document.body.scrollLeft) { //獲取橫豎滾動條位置
scrollTop=document.body.scrollTop;
scrollLeft=document.body.scrollLeft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft) { //同上，兼容寫法
scrollTop=document.documentElement.scrollTop;
scrollLeft=document.documentElement.scrollLeft;
}
if (e.pageX || e.pageY) { //獲取鼠標指針的當前坐標值
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY) {
posX = event.clientX + scrollTop;
posY = event.clientY + scrollLeft;
}
return{ //加上偏移值xy，返回計算后的位置
X : posX + x, Y : posY + y
}
}
function init() {
var dressView = document.getElementById('dress-view');
var gentleView = document.getElementById('gentle-view');
var windowWidth = dressView.offsetWidth;
var windowHeight = dressView.offsetHeight;
var imgWidth = windowWidth;
dressView.style.backgroundSize = imgWidth + "px " + windowHeight + "px";
gentleView.style.backgroundSize = imgWidth + "px " + windowHeight + "px";
}
function hiddenGentleView() {
var gentleView = document.getElementById('gentle-view');
gentleView.style.display = "none";
}
</script>
</head>
<body>
<div id="dress-view" class="dress-view" onload="" onresize="" onmouseout="hiddenGentleView();">
<div id="gentle-view" class="gentle-view"></div>
</div>
</body>
</html>