鼠标跟随光晕

Cursor Spotlight Glow

中级网页

深色页面上，一团柔和的光跟着鼠标移动，照到哪里哪里就微微发亮，功能卡片的边框也在靠近鼠标的一侧亮起来。Linear、Vercel 这类开发者产品的官网很爱用，安静又高级。

你可能会说：「深色背景的功能介绍区，能不能做成鼠标像手电筒一样，照到哪里哪里亮，卡片边框也跟着发光？」

效果预览一团柔光跟着鼠标，卡片边框随之点亮

正在加载演示…

怎么做3 步做出来

把鼠标位置写成 CSS 变量

脚本只做一件事：鼠标移动时，把它相对容器的坐标写成 --x、--y，再给每张卡片写一份相对卡片自己的坐标。光晕怎么画全交给 CSS。

查看代码js

const grid = document.querySelector('.glow-grid');
const cards = grid.querySelectorAll('.glow-card');

grid.addEventListener('pointermove', (event) => {
  const box = grid.getBoundingClientRect();
  grid.style.setProperty('--x', `${event.clientX - box.left}px`);
  grid.style.setProperty('--y', `${event.clientY - box.top}px`);
  cards.forEach((card) => {
    const rect = card.getBoundingClientRect();
    card.style.setProperty('--x', `${event.clientX - rect.left}px`);
    card.style.setProperty('--y', `${event.clientY - rect.top}px`);
  });
});

2
背景光晕：以鼠标为圆心的径向渐变
容器的背景是一个以 (--x, --y) 为圆心的半透明径向渐变，叠在深色底色上。光晕颜色的透明度要低（0.1~0.2），亮得太明显就成了手电筒，失去高级感。
查看代码收起代码css
```
.glow-grid {
  --x: 50%;
  --y: 30%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(420px circle at var(--x) var(--y), rgba(129, 140, 248, 0.18), transparent 60%),
    #020617;
}
```

卡片边框只亮靠近鼠标的那一段

在卡片上用 ::before 画一层同样以鼠标为圆心的渐变，再用遮罩把中间挖空，只留 1px 的边框。这样边框就只在离鼠标近的地方发亮。初始坐标设在卡片外很远的地方，鼠标进来之前边框是暗的。

查看代码css

.glow-card {
  --x: -999px;
  --y: -999px;
  position: relative;
  padding: 16px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.85);
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px; /* 边框粗细 */
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(250px circle at var(--x) var(--y),
    rgba(129, 140, 248, 0.9), rgba(255, 255, 255, 0.08) 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

适合放在哪

适合用

深色官网的功能介绍区、定价卡片区。
开发者工具、AI 产品的首页背景。
作品集网站的项目卡片网格。

不适合用

浅色页面上光晕几乎看不见，别硬用；改用悬停阴影。
主要用户在手机上时，别把信息放在光晕效果里；触屏没有鼠标位置。
卡片很多（上百张）的列表，别每次鼠标移动都遍历所有卡片；只给视野内的卡片更新，或者只做背景光晕。

让 AI 帮你做复制给 AI Agent 直接用

请给【深色背景的卡片区域，如：首页的功能介绍网格】加上鼠标跟随光晕。先阅读这个区域的组件和样式，确认背景色、卡片结构和项目里的主题色变量。要求：鼠标移动时把相对容器、相对每张卡片的坐标写成 CSS 变量 --x、--y；容器背景加一层以鼠标为圆心、低透明度（约 0.15）的径向渐变；每张卡片用 ::before 加遮罩只显示 1px 边框，边框靠近鼠标处发亮；初始坐标放在卡片外，鼠标离开时恢复；只在桌面鼠标下生效；用 requestAnimationFrame 合并频繁的鼠标事件。卡片内的点击和文字对比度不受影响。不改无关代码。最后说明怎样验证：快速移动鼠标时不卡顿，手机上页面正常。

用到的知识

渐变深色模式悬停鼠标跟随倾斜