<p>鼠标跟随的圆形遮罩是一种以鼠标为中心、实时移动的透明圆形区域，用于聚焦提示或视觉特效；其核心是通过JavaScript监听mousemove获取clientX/clientY，用CSS变量（--x/--y）传递坐标，再由::after伪元素结合transform: translate(calc(var(--x) 1px), calc(var(--y) 1px))实现精准跟随，并需注意坐标基准对齐、节流优化及pointer-events: none等细节。</p>
什么是鼠标跟随的圆形遮罩？
它指页面上一个透明圆形区域始终以鼠标为中心，遮盖（或反向高亮）其下方内容，常用于聚焦提示、交互引导或视觉特效。核心难点不在“圆形”，而在“跟随”——CSS 本身不提供鼠标坐标响应式更新机制，:hover 只能作用于静态元素，所以必须借助 JavaScript 获取 clientX/clientY，再通过 CSS 自定义属性（--x、--y）把坐标传给伪元素。
用 ::after 实现遮罩层的关键结构
遮罩不能用 position: fixed 直接覆盖全屏（会脱离文档流、遮挡交互），而应挂载在目标容器上，用 position: absolute + inset: 0 占满父级，再用 border-radius: 50% 和 clip-path 或 mask 控制可见区域。更轻量的做法是：让 ::after 本身就是一个大圆，通过 transform: translate() 居中到鼠标点，并用 background: rgba(0,0,0,0.7) 覆盖周围，只留中心透明。
- 父容器需设
position: relative，否则::after会相对 body 定位 -
::after必须设content: ""，否则不渲染 - 圆心坐标靠
transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px))实现，注意单位要显式写px，否则计算无效 - 为避免边缘裁剪，
::after尺寸建议 ≥ 2 倍视口宽高（如width: 200vw; height: 200vh;）
JavaScript 同步坐标的最小必要逻辑
监听 mousemove 事件，读取 e.clientX 和 e.clientY，写入容器的 style.setProperty()。关键不是“实时”，而是“节流”——高频触发会导致卡顿，直接用 requestAnimationFrame 最稳妥。
const container = document.querySelector('.mask-container');
let x = 0, y = 0;
<p>function updateMask(e) {
x = e.clientX;
y = e.clientY;
}</p><p>document.addEventListener('mousemove', updateMask);</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>function render() {
container.style.setProperty('--x', x);
container.style.setProperty('--y', y);
requestAnimationFrame(render);
}
render();注意：--x 和 --y 是纯数值，不要带单位；CSS 里用 calc(var(--x) * 1px) 补单位，比拼字符串更可靠。
完整 CSS 中容易漏掉的细节
很多实现乍看能动，但一滚动就错位、一缩放就偏移、一换设备就失效，问题基本出在坐标基准没对齐。
- 如果容器有
padding或border，clientX/Y是相对于 viewport 的，需减去容器getBoundingClientRect().left/top才能转为相对坐标 - 若页面可滚动，
clientX/Y已含滚动偏移，无需额外处理；但若容器是position: fixed，就得用pageX/pageY并手动减去window.scrollX/Y - 移动端需额外监听
touchmove，且取e.touches[0].clientX，并阻止默认行为防滚动干扰 -
pointer-events: none必须加在::after上，否则会拦截鼠标事件
最常被忽略的是：没有适配缩放（devicePixelRatio 变化）和 iframe 嵌套场景。真要跨框架使用，得用 iframe.contentWindow 重新绑定事件，而不是只监听顶层 window。
