如何使一个div的部分区域变透明而其他部分模糊掉？

Question

背景
页面上有一个不停移动的div标签（眼部追踪区域）
这个div外层还有一个div 里面有一些按钮、图片、文字之类的

现在想让这个活动的div下方的内容变为透明 其他部分模糊掉 如何实现呢？

Answer 1

模糊可以用 backdrop-filter 实现，然后部分透明可以用 mask 来实现

.wrap{
  backdrop-filter: blur(5px);
  -webkit-mask: radial-gradient( circle at calc(var(--x, .5) * 100% )  calc(var(--y, .5) * 100% ), transparent 50px, red 51px);
}

下面写了一个demo，你可以根据需求调整一下

https://codepen.io/xboxyan/pe...