一、mask-image属性是什么

mask-image属性需要有一张png图片，这张图片遮挡在指定DOM上，图片中透明部分遮挡的部分将不显示；被不透明部分遮挡的部分将显示出来，显示的是背景图片或背景色。

1、效果

可以发现，当使用了mask-image属性后，被透明部分遮挡的部分将不显示，被不透明部分遮挡的部分反而显示

2、实现

      .mask-container {
        width: 300px;
        height: 200px;
        background-color: red;
        -webkit-mask-image: url('mask.png');
      }
      img {
        background-color: yellowgreen;
      }

    <div class="mask-container">
      文字文字文字文字
    </div>
    <img src="./mask.png" />

3、在mask-container盒子中加一个盒子，结合css3动画便可以实现加载的效果

      .mask-container {
        width: 300px;
        height: 200px;
        background-color: red;
        -webkit-mask-image: url('mask1.png');
      }
      .mask-container > div {
        height: 100%;
        background: linear-gradient(#f1c40f, #e67e22, #e74c3c);
        animation: 2s move ease-in-out;
      }
      @keyframes move {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }

    <div class="mask-container">
      <div></div>
    </div>

效果：

素材：mask.png（300*200）

二、用mask-image写一个进度条

1、效果

2、实现

      .progress-container {
        width: 300px;
        height: 20px;
        background-color: yellowgreen;
        -webkit-mask-image: url('progress.png');
      }
      .progress-container div {
        height: 100%;
        background-color: gray;
        animation: loading 3s;
      }
      @keyframes loading {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }

    <div class="progress-container">
      <div></div>
    </div>

素材：progress.png（300*20）

三、mask-image+css3径向渐变实现windows10日历探照灯效果

1、效果

2、实现

      .grid-container {
        width: 300px;
        height: 300px;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        color: #fff;
        background-color: rgb(60, 60, 60);
      }

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

      .grid-item:hover {
        border: 3px solid rgba(255, 255, 255, 0.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-color: 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, 0.5);
      }

    <div class="grid-container">
      <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>

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