有些话直说太轻藏在心里又太重。今晚我把想对你说的话藏进了一轮月亮里。请移动你的指尖或鼠标让光穿透黑夜照亮那句我一直没敢大声说出的话。代码实现效果大家可以更换自己喜欢的图片哦代码实现思路底层是一张“月色真美”的暗图顶层叠放一张“我喜欢你”的亮图通过 CSS 的 mask-image属性给顶层图片加一个径向渐变遮罩用 JS 监听鼠标坐标实时改变遮罩的中心点位置。完整代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title全屏探照灯鼠标移到哪里哪里变化/titlestylehtml, body{margin:0;height:100%;overflow:hidden;}/* 全屏舞台铺满整个浏览器窗口 */.stage{position:fixed;inset:0;cursor:crosshair;}.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;/* 图片自动铺满屏幕比例不同就裁剪填充 */pointer-events:none;}#changed{mask-image:radial-gradient(circle 0px at 50% 50%,black 55%,transparent 100%);-webkit-mask-image:radial-gradient(circle 0px at 50% 50%,black 55%,transparent 100%);}/* 右下角小控制条 */.controls{position:fixed;right:16px;bottom:16px;background:rgba(0,0,0,0.55);color:#fff;font-family:Microsoft YaHei,sans-serif;font-size:13px;padding:10px 14px;border-radius:10px;display:flex;align-items:center;gap:10px;z-index:10;backdrop-filter:blur(4px);}input[typerange]{width:140px;}.hint{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:rgba(0,0,0,0.45);color:#fff;font-family:Microsoft YaHei,sans-serif;font-size:14px;padding:8px 18px;border-radius:20px;z-index:10;pointer-events:none;transition:opacity 1s ease;}/style/headbodydivclassstageidstageimgclassbasesrcalt图片1imgidchangedsrcalt图片2/divdivclasshintidhint移动鼠标试试/divdivclasscontrolsspan半径/spaninputtyperangeidradiusmin100max500value220spanidradiusVal220 px/span/divscriptconststagedocument.getElementById(stage);constchangeddocument.getElementById(changed);constsliderdocument.getElementById(radius);constlabeldocument.getElementById(radiusVal);/* 使用本地图片底层为图片1探照灯照到时显示图片2 */document.querySelector(.base).src图片1.png;changed.src图片2.png;letRslider.value;slider.addEventListener(input,(){Rslider.value;label.textContentR px;});/* 核心mask 跟随鼠标全屏监听 window */functionsetMask(x,y){constvradial-gradient(circle${R}px at${x}px${y}px, black 55%, transparent 100%);changed.style.maskImagev;changed.style.webkitMaskImagev;}window.addEventListener(mousemove,esetMask(e.clientX,e.clientY));window.addEventListener(mouseleave,(){changed.style.maskImagenone;changed.style.webkitMaskImagenone;});// 触屏按住拖动也能看window.addEventListener(touchmove,e{constte.touches[0];setMask(t.clientX,t.clientY);},{passive:true});// 提示语 6 秒后淡出setTimeout((){consthintdocument.getElementById(hint);hint.style.opacity0;},6000);/script/body/html喂给AI提示词请帮我写一个单文件 HTML 页面内联 CSS JS不依赖任何外部库实现全屏探照灯效果要求如下页面结构两张图片全屏铺满、完全重叠底层是 图片1.png上层是 图片2.png都用 position: fixed; inset: 0 object-fit: cover 铺满窗口上层图片用 CSS mask-image: radial-gradient(circle Rpx at Xpx Ypx, black 55%, transparent 100%) 遮罩只有鼠标光斑范围内的部分可见交互逻辑监听整个 window 的 mousemove把鼠标坐标实时写入上层图片的 mask 中心clientX/clientY形成“手电筒照到哪里哪里就变化”的效果鼠标移出窗口mouseleave时隐藏上层图支持触屏的 touchmove 拖动右下角加一个小控制条滑块可调节光斑半径100–500px旁边实时显示当前数值页面顶部给一行提示文字6 秒后自动淡出其他要求光标用 crosshair控制条用半透明黑色毛玻璃风格backdrop-filter: blur图片路径写相对路径 图片1.png、图片2.png方便我直接替换成自己的图中文注释代码简洁易读