探究mask-image的魔力——Win10日历的探照灯效果原来可以这样做！

简要介绍

字面上理解是遮罩的意思。熟悉PS的小伙伴想必对这“遮罩层”的概念更为清晰，在PS中可称为“蒙版”，它是指定某层的元件的轮廓/alpha通道来作为自己剪影的依据。在CSS中，mask-image这个属性是以指定元素的透明度作为剪影依据的。

根据 MDN 上的介绍，mask-image CSS属性用于设置元素上遮罩层的图像。一般来说，使用mask-image的元素通常都有透明的部分，元素用于遮挡在指定的DOM上，被元素透明部分遮住的部分将不被显示，被不透明部分遮住的部分将显示。 注意我这里说的是元素，通常是图片，也可以是背景色为渐变的元素，显示的是图片或者背景色。

来一张简单的示意图

各浏览器兼容性

一个小例子 —— 进度加载动画

进度条是一个很常见的组件，进度条进度条，一般都是条状的或者好看点可以做成圆环。为了更加个性化，很多开发人员会把加载进度放进Logo中，今天我们就使用mask-image这个属性来模拟一个类似的加载效果。

因为mask-image只会显示不透明的部分，因此，我们只需要准备一个Logo图片，一个具有背景色的DOM，保持Logo层不动，背景DOM动起来就可以实现了。

1. 一张具有透明部分的Logo图片
   
2. HTML结构

<div class="mask-layer">
    <div class="box"></div>
</div>

3. 设置遮罩层mask-layer与背景层box的样式

.mask-layer {
    width: 300px;
    height: 200px;
    background: gray;
    -webkit-mask-image: url('mask.png');
    -webkit-mask-size: 300px 200px;
}

.box {
    width: 100%;
    height: 100%;
    background: linear-gradient(#f1c40f,#e67e22,#e74c3c);
    animation: move 10s;
}

@keyframes move {
    from{
        transform: translateY(100%);
    }
    to{
        transform: translateY(0);
    }
}

实现效果

之前有见过波浪效果的，感兴趣的小伙伴可以试一下~

另一个例子 —— Win10日历探照灯效果

先来看看这个效果如何。

我觉得这个UI真的太棒了！日历元素的边框是可以感知鼠标的，鼠标位置的变化可以照亮周围的边框！虽然不知道它具体是怎么实现的，但我们的mask-image是可以做到类似的效果的！

思路

先把表格grid-body使用grid布局搞出来，再在这个表格之上覆盖一层遮罩层 grid-mask，注意， 这个遮罩层不仅 宽高 要和grid-body保持一致，而且 外部位置、内部布局 也要做到一样。也就是说，这两层元素是一定对齐的，一层用于放内容，另一层来展示照亮的边框。

搞定物理布局之后，就要对遮罩层 grid-mask设置mask-image属性了。这里我们就用的不是图片了，而是 径向渐变背景，我们绘制出一个圆形渐变背景，半径外的部分设置为透明的，这样一来它会遮住下一层的内容而不显示出来，就做出照亮该圆内边框的效果了！

如何感知鼠标？我们只需要对grid-body绑定mousemove事件，根据鼠标的位置，动态地改变遮罩层的位置就好了！

代码部分

<!-- 为了保持一致，大家都要九个格子哦！ -->
<div class="grid-body">
    <div class="grid-mask">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-body {
    width: 300px;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;

    cursor: default;   
    color: rgba(255, 255, 255, .8);
    background-color: rgb(60, 60, 60);   
}

.grid-item{
    border: 3px solid transparent;
}

.grid-item:hover {
    border: 3px solid rgba(255, 255, 255, .3);
}

.grid-mask {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    /* 上面的代码是为了保持两层一致 */

    /* 设置mask-image */
    /* 光圈颜色 */
    background: transparent;
    -webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 160px 160px;
    pointer-events: none;
}

.grid-mask div{
    border: 3px solid rgba(255, 255, 255, .5)
}

let grid  = document.querySelector('.grid-body')
let maskLayer = document.querySelector('.grid-mask')
let bounding = maskLayer.getBoundingClientRect()
grid.addEventListener('mousemove',(e)=>{
    let x = e.pageX
    let y = e.pageY
    maskLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
})

实现效果

这是用于测试的丐版，后来我仿照Win10日历的风格真的写了个差不多不多不多的高仿版！

参考资料

https://www.cnblogs.com/vajoy/p/5095511.html