鼠标跟随镂空效果,借助 CSS MASK 轻松实现

之前在某社区看到这样过一个问题,如何使一个div的部分区域变透明而其他部分模糊掉?[1],最后的实现效果如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图

进一步,还能实现任意形状的镂空效果(微信压缩的有点过分了,建议查看 demo)

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图1

特点是鼠标经过的地方清晰可见,其他地方则是模糊的

可能很多同学一开始无从下手,没有思路,没关系,不要急,可以先从简单的、类似的效果开始,一步一步尝试,一起看看吧。

一、普通半透明效果

平时开发中可能还会碰到一种半透明的效果,有点类似于探照灯(鼠标之外是半透明遮罩,看起来会暗一点),效果如下:

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图2

和文章开头有点类似吧?那先从这种效果开始,假设布局是这样的:

<div class="wrap">
    <img class="prew" src="https://tva1.sinaimg.cn/large/008i3skNgy1gubr2sbyqdj60xa0m6tey02.jpg">
</div>

那么如何绘制一个中间镂空的圆呢?下面介绍两种方法

1. 阴影扩展实现

其实很简单,需要一点点想象力,一个足够大的阴影就可以了,原理如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图3

为了结构更加精简,这里可以用伪元素::before来绘制。用代码实现就是

.wrap::before{
  content:'';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 999vw rgba(0, 0, 0, .5); /*一个足够大的投影*/
}

这样就得到了以下效果

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图2

2. 径向渐变实现

除了上述阴影扩展的方式,利用 CSS 径向渐变 也能实现这样的效果

需要绘制一个从透明到半透明的渐变,关键代码如下

.wrap::before{
     /**/
    background: radial-gradient( circle at center, transparent 50px, rgba(0,0,0,.5) 51px);
}

效果如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图2

二、借助 CSS 变量传递鼠标位置

按照之前的经验,可能会在 js 中直接修改目标元素的 style 属性,比如像这样的操作

img.addEventListener('mousemove', (ev) => {
   img.style.left = 'XXpx';
   img.style.top = 'XXpx';
})

虽然也能实现想要的效果,但是这样交互与业务逻辑混合在一起,不利于后面的维护。其实,我们只需要通过 js 拿到鼠标的坐标就行了(CSS没有这样的能力),然后剩下的在 CSS 中处理就行了。

那如何传递呢?

这里借助 CSS 变量,那一切就好办了!假设鼠标的坐标是 [--x,--y](范围是[0, 1]),那么遮罩的坐标就可以使用 calc计算了

.wrap::before{
  left: calc( var(--x) * 100% );
  top: calc( var(--y) * 100% );
}

JS 获取比较容易,关键代码如下

img.addEventListener('mousemove', (ev) => {
    img.style.setProperty('--x', ev.offsetX / ev.target.offsetWidth);
    img.style.setProperty('--y', ev.offsetY / ev.target.offsetHeight);
})

这样一来,半透明效果的镂空效果就完成了,实时效果如下(注意观察–x 的变化)

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图4

完整代码可以访问:backdrop-shadow (codepen.io)[2]

再来说第二种径向渐变的方案。

从这里就可以看出 CSS 变量的好处了,无需修改 JS,只需要在CSS中修改渐变中心点的位置就可以实现了(at 关键词),关键代码如下

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

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图5

三、背景模糊尝试

在 CSS 中,有一个专门针对背景(元素背后区域)的滤镜:backdrop-filter[3]

backdrop-filter: blur(10px);

下面是 MDN 中的一个示意效果

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图6

backdrop-filter是让当前元素所在区域后面的内容模糊,要想看到效果,需要元素本身半透明或者完全透明;而filter是让当前元素自身模糊。有兴趣的可以查看这篇文章:CSS backdrop-filter简介与苹果iOS毛玻璃效果[4]

现在尝试一下

1. 阴影扩展实现

如果在上面第一个例子中添加 backdrop-filter

.wrap::before{
  /**/
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%); /*默认居中*/
  box-shadow: 0 0 0 999vw rgba(0, 0, 0, .5); /*足够大的投影*/
  backdrop-filter: blur(5px)
}

实时效果如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图7

可以看到鼠标区域是模糊的,外面是清晰的,正好和希望的效果相反。原因是,圆形区域才是真实的结构,外面都是阴影,是不存在的,所以最后滤镜的作用范围只有圆形部分

2. 径向渐变实现

如果在第二个例子中添加 backdrop-filter

.wrap::before{
     /**/    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)
}

实时效果如下(微信压缩有点厉害)

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图8

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

四、CSS MASK 实现镂空效果

MASK 的原理和现实生活比较像,你可以想象成镂空,就好比一整块磨砂玻璃,然后通过 CSS MASK 打了一个圆孔,这样透过圆孔看到后面肯定是清晰的。

然后对第二个例子稍作修改,把这个径向渐变作为层,示意如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图9

用代码实现就是

.wrap::before{
   -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)
}

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

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图

完整代码可以查看:backdrop-mask (codepen.io)[5]

五、借助 MASK COMPOSITE 实现更灵活的镂空效果

除了使用径向渐变绘制遮罩层以外,还可以通过 CSS MASK COMPOSITE(遮罩合成)[6]的方式来实现,这种方式更为灵活,可以扩展其他形状的效果。

标准关键值如下(可惜只有firefox支持):

mask-composite: add; /* 叠加(默认值) */
mask-composite: subtract; /* 减去,排除掉上层的区域 */
mask-composite: intersect; /* 相交,只显示重合的地方 */
mask-composite: exclude; /* 排除,只显示不重合的地方 */

MASK COMPOSITE 是什么意思呢?可以类比设计软件中的形状合成,几乎是一一对应的,下面是 photoshop 的效果示意

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图10

-webkit-mask-composite[7] 与标准下的值有所不同,属性值非常多(chrome 和 safari 支持),如下

-webkit-mask-composite: clear; /*清除,不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩,不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩,重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩,重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/

是不是一脸懵了?其实功能是完全覆盖了标准属性,这里做了一个各个属性对应的效果图,如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图11

现在回到这里,可以绘制一整块背景(线性渐变实现)和一个圆形背景(径向渐变实现),然后通过遮罩合成排除(mask-composite: exclude)打一个孔就行了,实现如下

.wrap::before{
   -webkit-mask: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='25' fill='%23C4C4C4'/%3E%3C/svg%3E"), linear-gradient(red, red);
   -webkit-mask-size: 50px, 100%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: calc(var(--x, .5) * 100% + var(--x, .5) * 100px - 50px )  calc(var(--y, .5) * 100% + var(--y, .5) * 100px - 50px ), 0;
   -webkit-mask-composite: xor; /*只显示不重合的地方, chorem 、safari 支持*/
   mask-composite: exclude; /* 排除,只显示不重合的地方, firefox 支持 */
   background: rgba(0,0,0,.3);
   backdrop-filter: blur(5px)
}

需要注意-webkit-mask-position中的计算,可以充分利用 calc 的特性,实时效果如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图

完整代码可以查看:backdrop-mask-composite (codepen.io)[8]

可能你已经发现,上述例子中的圆是通过 svg 绘制(已经进行 CSS 转义)的,还用到了遮罩合成,看着好像比前面的方式更加繁琐了。

为什么这么做呢?其实,这是一种更加万能的解决方式,可以带来无限的可能性。比如我现在需要一个星星的镂空效果,很简单,先通过一个绘制软件画一个,下面是 Figma

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图12

然后把这段 svg 代码转义一下,这里推荐使用张鑫旭老师的SVG在线压缩合并工具[9],然后把刚才圆形的 svg 替换成这个星形的svg 就可以了

.wrap::before{
     /**/   -webkit-mask: url("data:image/svg+xml,%3Csvg width='96' height='91' viewBox='0 0 96 91' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 0l11.226 34.55h36.327l-29.39 21.352L77.39 90.45 48 69.098 18.61 90.451 29.837 55.9.447 34.55h36.327L48 0z' fill='%23C4C4C4'/%3E%3C/svg%3E"), linear-gradient(red, red);
   -webkit-mask-size: 50px, 100%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: calc(var(--x, .5) * 100% + var(--x, .5) * 100px - 50px )  calc(var(--y, .5) * 100% + var(--y, .5) * 100px - 50px ), 0;
   -webkit-mask-composite: xor;   /*只显示不重合的地方, chorem 、safari 支持*/
   mask-composite: exclude; /* 排除,只显示不重合的地方, firefox 支持 */
   background: rgba(0,0,0,.3);
   backdrop-filter: blur(5px)
}

下面是星星镂空效果

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图13
Kapture 2021-11-20 at 13.35.28

完整代码可以查看:backdrop-star (codepen.io)[10]

再比如想要一个心形❤,也采用同样的方式,实现效果如下

鼠标跟随镂空效果,借助 CSS MASK 轻松实现插图1
Kapture 2021-11-20 at 13.44.26

完整代码可以查看:backdrop-heart (codepen.io)[11]

只要你能想到的,都可以实现,是不是非常神奇?

六、简单总结一下

以上实现了一个鼠标跟随镂空的效果,从简单到复杂,从单一到通用,虽然借助了一点点 JS ,但是仅仅是“工具”的角色,交互逻辑全部都由 CSS 完成,而且根据灵活,适应性更强,下面总结一下要点:

  1. 足够大的阴影是一个实现圆形镂空效果的小技巧
  2. CSS 渐变也能轻易的绘制出圆形镂空背景
  3. 借助 CSS 变量可以很方便的利用鼠标位置实现想要的效果
  4. backdrop-filter 可以想象成磨砂玻璃的功能
  5. CSS Mask 可以给磨砂玻璃打孔,实现镂空的效果
  6. 借助遮罩合成特性和SVG,可以实现任意形状的镂空效果

发表评论

后才能评论