有趣的CSS探照灯

携手创造，一起生长！这是我参与「日新计划 8 月更文挑战」的第5天，点击检查活动概况

介绍

信任很多小伙伴都做个一些卡片列表类页面模块，可是过单纯的展现这些卡片未免有些枯燥，本期将共享一向探照灯的卡片移入作用，让咱们的卡片变得风趣起来~

演示

正文

基础建立

还是老样子，咱们用 petite-vue 来创立这个项目，好处是大部分语法和 vue 相同，并且极为轻量，毕竟都是同一个作者么。

import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
  isActive: false,
  cards: [
  	// ...        
  ],
  mounted() {
    this.isActive = true;
  },
}).mount()

在完成之前，咱们先要把卡片完成网格摆放起来，就把他们变成3行一列吧，至于你所见到的模拟数据是我最近在玩新出的数码宝贝游戏里的数码资料，我比较中二就把这些资料当填充内容了，所以注意力不要放在文字内容上。

ul{
  width: 100%;
  display: grid;
  grid-column-gap: .5em;;
  grid-row-gap: .5em;
  grid-template-columns: repeat(3, 1fr);
}

增加灯火

要让卡片完成局部的探照作用，那肯定要用伪元素掩盖在卡片容器上，并且伪元素还要用 radial-gradient 来完成一个圆形渐变的浅白，这样灯火就有了。

li{
   &::after {
      background: radial-gradient(
        600px circle at 0 0,
        rgba(255, 255, 255, 0.25),
        transparent 50%
      );
   }
}

目前咱们把位置都统一设置成了原点坐标，咱们要做出探照作用的关键便是在于怎么动态的捕获计算出这坐标值

跟随移动

咱们经过绑定在父节点上的 handlePointerMove 办法，去监听来去 pointermove 事件，这样在父节点每次鼠标移入进去，就可以给每一个之卡片节点遍历，获取当前卡片的当前位置，然后计算出探照光圈的坐标值，最终经过 setProperty 办法，改动css变量

handlePointerMove(e) {
    const { clientX, clientY } = e;
    document.querySelectorAll("li").forEach(item => {
      const { left, top } = item.getBoundingClientRect();
      item.style.setProperty("--x", clientX - left + "px");
      item.style.setProperty("--y", clientY - top + "px");
    })
}

最终，咱们还要修改卡片伪元素的坐标，需要设置成刚才 setProperty 写入的 --x 和 --y 坐标值，便是这么简单一个探照卡片的作用完成啦~

li{
   &::after {
      background: radial-gradient(
        600px circle at var(--x) var(--y),
        rgba(255, 255, 255, 0.25),
        transparent 50%
      );
   }
}