Javascript CSS/JS模糊，鼠标周围除外

我正试图从头开始开发一个网站。我正在使用html、css和js（根据需要使用jQuery和其他js库）。我希望代码可以在任何地方删除，而不需要安装额外的插件/脚本。所有需要的都应该放在一个文件夹中，我可以放在任何地方并运行（即插即用风格），这样我就可以下载所有库（只有bootstrap、jQuery和Vague.js atm）

在其中一个页面中，我有多个图像以类似旋转木马的方式移动。图像覆盖了页面，是页面上唯一的东西（除了徽标和菜单按钮）。我需要做的是使屏幕/图像模糊，并且只能看到光标周围的一个圆圈。目前，我设法使所有图像模糊，并在鼠标悬停在图像上时对其进行聚焦，但我不知道如何仅对图像的一小部分进行聚焦

我知道这不是处理事情的理想方式，但为了让旋转木马顺利工作并可在多个页面中复制，我必须复制所有图像并进行css变换操作，关键帧移动50%。我知道这部分可能更好，你可以忽略。我目前拥有的是：

.scrollWrapper{
溢出：隐藏；
}
伊姆斯克罗尔先生{
背景色：浅灰色；
宽度：最大含量；
字号：0；
z指数：-999；
高度：100vh；
}
.滚动图像{
过滤器：模糊（10px）；
-webkit过滤器：模糊（10px）；
显示：内联块；
身高：100%；
}
.滚动图像：悬停{
过滤器：模糊（0px）；
-webkit过滤器：模糊（0px）；
}
@关键帧滚动{
0%{transform:translateX（0%）；}
100%{transform:translateX（-50%）；}
}
伊姆斯克罗尔先生{
动画：滚动60秒线性无限；
z指数：-1000；
}
body.scrollWrapper.pause{
动画播放状态：暂停；
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
}

函数toggleAnimation（）{
scroll=document.getElementById（'scroll'）；
if（scroll.classList.contains（'pause'））{
scroll.classList.remove（'pause'）；
}否则{
scroll.classList.add（'pause'）；
}
}

我目前的想法是用scrollWrapper类模糊div，并在光标周围有一个区域被聚焦，但我不确定如何做到这一点

我环顾四周，找到了这篇文章，但就我所知，这些解决方案只适用于一个静态图像，而不适用于多个移动图像。我现在正在玩Vague.js，但不知道怎么做

---

我不是一个web开发人员，很少使用js/jquery，所以我开始觉得自己很愚蠢，因为我无法解决这个问题。。。这是我在换成完全不同的东西之前的最后手段，因此我非常感谢您的帮助。

使用新的CSS进行此操作非常简单，最困难的部分是在过滤器中设置一个孔

幸运的是

对于圆，最简单的方法可能是使用径向渐变作为遮罩图像，如中所示

const blur_elem=document.getElementById（“模糊”）；
document.onmousemove=（evt）=>{
blur_elem.style.transform=`translate（${evt.clientX}px，${evt.clientY}px）`；
};
#模糊{
位置：固定；
z指数：999；
指针事件：无；
/*视口大小的两倍，以便始终完全覆盖*/
宽度：200vw；
高度：200vh；
/*负偏移一半，因此我们确保覆盖整个视口*/
左：-100vw；
顶部：-100vh；
/*我们将使用“变换”“平移”来移动它*/
变换原点：中心；
-webkit背景滤镜：模糊（15px）；
背景滤镜：模糊（15px）；
-webkit掩模图像：径向梯度（50%50%时为50px，透明100%，黑色100%）；
遮罩图像：径向渐变（50%50%时为50px，透明100%，黑色100%）
}
/*适用于没有背景过滤器的浏览器的falback*/
@不支持（（背景过滤器：模糊（0px））或（-webkit背景过滤器：模糊（0px）））{
#模糊{
背景色：rgba（255255.8）；
}
}

适用于任何内容

这是一个自定义作业，因为CSS中没有表示您的愿望的
游标值。您可能希望使用
canvas
。这不是我们想为你做的没有报酬的工作，但我会告诉你，我会使用
let mobile=navigator.userAgent.match（/Mobi/I）；如果（mobile）{yourImage.ontouchmove=function（ev）{let b=this.getBoundingClientRect（），e=ev.touch[0]，x=e.clientX-b.left，y=e.clientY-b.top；}}其他{yourImage.onmousemove=function（e）{let b=this.getBoundingClientRect（），x=e.clientX-b.left，y=e.clientY-b.top；}
。这将为您提供x，y。使用.Opps解析您的图像，在上述注释的代码末尾添加另一个
}
。@StackSlave感谢您的回复。我不是网络开发者，我还在学习js。我来看看画布。抱歉，如果任务在任何方面是“错误的”。投入努力，我们会告诉你为什么它不起作用。需要更多的细节。投票决定关闭。我已经试了3天了（就在今天，我花了5个多小时才完成），但我想我找错地方了。。。如果画布的东西不工作，我会做一个新的职位，这一个可以关闭。谢谢你的答复。这正是我所需要的，但是用一个圆代替一个正方形。我看到剪辑部分有一个圆函数，但我需要像你给我的例子一样模糊外部部分。有没有一种方法可以从中反转/切割出一个圆？@fletcher是的，你可以，但它有点复杂。编辑了答案。这正是我想要的。非常感谢你的帮助