仿win10 日历特效 mask

发现win10系统自带的日历的特效挺好看的，就想用js实现一下，然后各种百度，终于找到实现方法

• 先放代码 有空再加注释和解释

<template>
  <div class="mask" @mousemove="mousemove">
    <div class="light" ref="dom">
      <div class="list" v-for="item in 25" :key="item">{{ item }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue"

export default defineComponent({
  setup() {
    const dom = ref(null)
    function mousemove(e) {
      let x = e.offsetX
      let y = e.offsetY
      console.log(x, y)
      dom.value.style.webkitMaskPosition = `${x - 45}px ${y - 45}px`
    }

    return {
      mousemove,
      dom,
    }
  },
})
</script>

<style lang="scss" scoped>
.mask {
  width: 160px;
  height: 160px;
  background: #000;
  color: #fff;
  position: relative;

  .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: transparent;
    mask-image: radial-gradient(circle at center, white 0%, transparent 45px);
    mask-repeat: no-repeat;
    mask-size: 90px 90px;
    pointer-events: none;

    .list {
      width: 20%;
      height: 20%;
      border: 2px solid #fff;
    }
  }
}
</style>

• 效果截图