有趣的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 坐标值，就是这么简单一个探照卡片的效果实现啦~

扫描二维码关注公众号，回复： 14423683 查看本文章

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