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

维罗尼卡住了
  • 15

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

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

回复
阅读 1.7k
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...

动画.gif

你知道吗?

宣传栏