CSS mask 实现鼠标跟随镂空效果，2024年最新2024年前端开发实战

.wrap::before{

content: ‘’;

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

background: radial-gradient( circle at calc(var(–x) * 100% )  calc(var(–y) * 100% ), transparent 50px, rgba(0,0,0,.5) 51px);

backdrop-filter: blur(5px)

}`

效果如下：

已经全部都模糊了，只是圆形区域外暗一些。由于::before的尺寸占据整个容器，所以整个背后都变模糊了，圆形外部比较暗是因为半透明渐变的影响。

总之还是不能满足我们的需求，需要寻求新的解决方式。

五、CSS MASK 实现镂空

---

与其说是让圆形区域不模糊，还不如说是把那块区域给镂空了。就好比之前是一整块磨砂玻璃，然后通过 CSS MASK 打了一个圆孔，这样透过圆孔看到后面肯定是清晰的。

可以对第二个例子稍作修改，通过径向渐变绘制一个透明圆，剩余部分都是纯色的遮罩层，示意如下：

用代码实现就是

.wrap::before{

content: ‘’;

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

-webkit-mask: radial-gradient( circle at calc(var(–x, .5) * 100% )  calc(var(–y, .5) * 100% ), transparent 50px, #000 51px);

background: rgba(0,0,0,.3);

backdrop-filter: blur(5px)

}

这样就实现了文章开头的效果：

完整代码可以查看：https://codepen.io/xboxyan/pen/porpoXJ

六、CSS MASK COMPOSITE 实现更丰富的镂空效果

---

除了使用径向渐变绘制遮罩层以外，还可以通过 CSS MASK COMPOSITE（遮罩合成）的方式来实现。

CSS MASK COMPOSITE 链接：https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite

标准关键值如下（firefox支持）：

/* Keyword values */

mask-composite: add; /* 叠加（默认） */

mask-composite: subtract; /* 减去，排除掉上层的区域 */

mask-composite: intersect; /* 相交，只显示重合的地方 */

mask-composite: exclude; /* 排除，只显示不重合的地方 */

遮罩合成是什么意思呢？可