网页鼠标跟随光晕/光标效果的名称及实现方法咨询

第一个网站卡片悬停光晕效果 #

这个效果通常被称为卡片鼠标跟随发光效果（Card Hover Mouse-Follow Glow Effect），核心是基于鼠标在卡片内的位置动态生成径向光晕。
实现思路：

• 用JavaScript监听卡片的mousemove事件，获取鼠标在卡片内的相对坐标（x、y）
• 将坐标值通过CSS变量（如--mouse-x、--mouse-y）传递给卡片的伪元素
• 给伪元素设置radial-gradient背景，结合变量定位光晕中心，再通过opacity和过渡动画实现悬停显示/隐藏

示例代码片段：

.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.3), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::before {
  opacity: 1;
}

document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('mousemove', e => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    card.style.setProperty('--mouse-x', `${x}px`);
    card.style.setProperty('--mouse-y', `${y}px`);
  });
});

第二个网站全局鼠标跟随效果 #

这个效果被称为全局鼠标轨迹光晕效果（Global Mouse Trail Glow Effect），是跟随鼠标指针移动的全局视觉反馈效果。
实现思路：

• 在页面中创建一个固定定位的光晕元素（或用body的伪元素）
• 监听document的mousemove事件，实时更新光晕元素的left和top属性，使其跟随鼠标坐标
• 配合CSS的border-radius: 50%、background（或box-shadow）实现光晕样式，添加过渡动画让移动更平滑

示例代码片段：

.mouse-glow {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(100, 200, 255, 0.2);
  pointer-events: none;
  transition: transform 0.1s, opacity 0.3s;
  transform: translate(-50%, -50%);
}

const glow = document.createElement('div');
glow.classList.add('mouse-glow');
document.body.appendChild(glow);

document.addEventListener('mousemove', e => {
  glow.style.left = `${e.clientX}px`;
  glow.style.top = `${e.clientY}px`;
});

内容的提问来源于stack exchange，提问作者Alex