用纯 CSS 和 JavaScript 实现自定义光标与动态聚光灯效果教程

作者：袖梨 2026-07-11

本文详解如何用 CSS radial-gradient 配合 CSS 变量和伪元素，创建可随鼠标移动、精准居中且真正“揭示内容”的聚光灯效果，避免 DOM 操作性能损耗。

本文详解如何用 css `radial-gradient` 配合 css 变量和伪元素，创建可随鼠标移动、精准居中且真正“揭示内容”的聚光灯效果，避免 dom 操作性能损耗。

要实现一个真正「揭示内容」的聚光灯效果（而非仅叠加发光圆），关键在于：将遮罩层（黑底+中心透光）作为背景层覆盖整个容器，并通过动态更新 background-position 实现光斑跟随鼠标移动。原方案中直接插入 <div> 并设置 radial-gradient 背景，本质上只是在顶层画了一个发光圆，无法穿透遮罩显示底层内容——这正是问题核心。

✅ 正确思路是：利用 .box::before 伪元素作为全屏遮罩层，其背景使用「中心透明 → 外圈全黑」的径向渐变；再通过 JS 实时更新 --flashlight-x-pos 和 --flashlight-y-pos 两个 CSS 自定义变量，驱动背景定位，让“光洞”始终对准鼠标位置。

以下是完整实现步骤：

1. HTML 结构（极简）

<div class="box">  <h1>Light</h1></div>

2. CSS 样式（核心遮罩逻辑）

.box {  display: flex;  align-items: center;  justify-content: center;  cursor: none;  width: 100%;  padding: 5rem;  background-color: #000;  overflow: hidden;  position: relative;  /* 初始光斑偏移至可视区外，实现“隐藏”效果 */  --flashlight-x-pos: -200px;  --flashlight-y-pos: -200px;  --flashlight-inset: -300px; /* 控制遮罩层大小，确保完全覆盖 */}/* 聚光灯遮罩层（伪元素） */.box::before {  content: '';  position: absolute;  inset: var(--flashlight-inset); /* 全向扩展遮罩 */  background-image: radial-gradient(    circle,    transparent 0%,     /* 中心完全透明 → 显示内容 */    rgba(0, 0, 0, 0.8) 60px,  /* 过渡到半透明灰黑 */    #000 70px,         /* 快速过渡为纯黑 */    #000 100%           /* 完全覆盖 */  );  background-position: var(--flashlight-x-pos) var(--flashlight-y-pos);  background-repeat: no-repeat;  z-index: 1;}/* 自定义光标（也用伪元素，减少 DOM 节点） */.box::after {  content: '';  position: absolute;  width: 50px;  height: 50px;  background: url('https://picsum.photos/50') no-repeat center / contain;  transform: translate(var(--flashlight-x-pos), var(--flashlight-y-pos));  pointer-events: none;  z-index: 2;}

3. JavaScript（高效定位 + 变量驱动）

const box = document.querySelector('.box');// ⚠️ 关键：getBoundingClientRect 在事件外计算一次，避免 mousemove 中重复调用（性能敏感！）const rect = box.getBoundingClientRect();box.addEventListener('mousemove', (e) => {  const x = e.clientX - rect.left;  const y = e.clientY - rect.top;  // 计算相对于容器中心的偏移量（使光斑自然居中）  box.style.setProperty('--flashlight-x-pos', `${x - rect.width / 2}px`);  box.style.setProperty('--flashlight-y-pos', `${y - rect.height / 2}px`);});box.addEventListener('mouseleave', () => {  // 鼠标离开时，将光斑移出视区，实现平滑隐藏  box.style.setProperty('--flashlight-x-pos', '-300px');  box.style.setProperty('--flashlight-y-pos', '-300px');});