如何为网页表格实现手电筒式光标效果？

针对黑色背景网站，以下是实现手电筒光标仅照亮表格内段落的具体代码和逻辑：

核心思路 #

通过CSS遮罩（mask）创建跟随鼠标的透明光斑，用黑色遮罩覆盖表格内容，仅光斑区域可显示下方的白色文字，模拟手电筒效果。

HTML结构示例 #

<body>
  <table class="flashlight-table">
    <tr>
      <td>
        <p>表格内的段落内容，只有在手电筒光斑范围内才可见</p>
      </td>
      <td>
        <p>更多需要被照亮的文本内容，测试多行显示效果</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>第二行表格内容，验证光斑跟随的流畅性</p>
      </td>
      <td>
        <p>可以添加任意长度的段落，不影响光斑效果</p>
      </td>
    </tr>
  </table>
</body>

CSS代码（保留原有黑色背景风格） #

/* 保留你已有的body样式 */
body {
  background-color: #000;
  margin: 0;
  padding: 2rem;
  color: #fff; /* 全局文字默认白色，可根据你的需求调整 */
}

/* 表格核心样式 */
.flashlight-table {
  width: 100%;
  border-collapse: collapse;
  position: relative; /* 为遮罩伪元素提供定位基准 */
}

.flashlight-table td {
  padding: 1.5rem;
  border: 1px solid #333; /* 表格边框，可根据你的设计调整 */
}

/* 手电筒遮罩层 */
.flashlight-table::after {
  content: '';
  position: absolute;
  inset: 0; /* 覆盖整个表格 */
  background-color: #000; /* 与页面背景同色，遮挡表格内容 */
  /* 创建圆形透明光斑，150px为光斑半径，可自行调整 */
  -webkit-mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 150px, black 150px);
  mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 150px, black 150px);
  pointer-events: none; /* 不干扰表格的鼠标交互（如选中文本） */
}

JavaScript代码（实现光斑跟随鼠标） #

const targetTable = document.querySelector('.flashlight-table');

// 监听鼠标移动事件，更新光斑位置
document.addEventListener('mousemove', (event) => {
  const tableRect = targetTable.getBoundingClientRect();
  // 计算鼠标相对于表格左上角的坐标
  const relativeX = event.clientX - tableRect.left;
  const relativeY = event.clientY - tableRect.top;
  
  // 更新CSS变量，控制光斑位置
  targetTable.style.setProperty('--mouse-x', `${relativeX}px`);
  targetTable.style.setProperty('--mouse-y', `${relativeY}px`);
});

自定义调整项 #

• 修改radial-gradient中的150px值，可以调整手电筒光斑的大小，数值越大光斑范围越广。
• 如果需要光斑边缘更柔和，可以把transparent 150px, black 150px改成transparent 140px, black 160px，创建渐变过渡的边缘。
• 若要让光斑仅在表格内移动，可在JS中添加坐标限制，避免光斑移出表格范围：

  const clampedX = Math.max(0, Math.min(relativeX, tableRect.width));
  const clampedY = Math.max(0, Math.min(relativeY, tableRect.height));
  targetTable.style.setProperty('--mouse-x', `${clampedX}px`);
  targetTable.style.setProperty('--mouse-y', `${clampedY}px`);
  

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