DeepSeek视觉API接入Agent实战：多模态集成与成本控制
2026/9/28 21:42:35
有些话，直说太轻，藏在心里又太重。
今晚，我把想对你说的话，藏进了一轮月亮里。
请移动你的指尖（或鼠标），让光穿透黑夜，照亮那句我一直没敢大声说出的话。
代码实现效果
大家可以更换自己喜欢的图片哦！
代码实现思路
- 底层是一张“月色真美”的暗图；
- 顶层叠放一张“我喜欢你”的亮图；
- 通过 CSS 的 mask-image属性，给顶层图片加一个径向渐变遮罩；
- 用 JS 监听鼠标坐标，实时改变遮罩的中心点位置。
完整代码
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>全屏探照灯：鼠标移到哪里，哪里变化</title><style>html, 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[type="range"]{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></head><body><divclass="stage"id="stage"><imgclass="base"src=""alt="图片1"><imgid="changed"src=""alt="图片2"></div><divclass="hint"id="hint">移动鼠标试试🌙</div><divclass="controls"><span>半径</span><inputtype="range"id="radius"min="100"max="500"value="220"><spanid="radiusVal">220 px</span></div><script>conststage=document.getElementById("stage");constchanged=document.getElementById("changed");constslider=document.getElementById("radius");constlabel=document.getElementById("radiusVal");/* 使用本地图片：底层为图片1，探照灯照到时显示图片2 */document.querySelector(".base").src="图片1.png";changed.src="图片2.png";letR=+slider.value;slider.addEventListener("input",()=>{R=+slider.value;label.textContent=R+" px";});/* ================= 核心：mask 跟随鼠标（全屏监听 window） ================= */functionsetMask(x,y){constv=`radial-gradient(circle${R}px at${x}px${y}px, black 55%, transparent 100%)`;changed.style.maskImage=v;changed.style.webkitMaskImage=v;}window.addEventListener("mousemove",e=>setMask(e.clientX,e.clientY));window.addEventListener("mouseleave",()=>{changed.style.maskImage="none";changed.style.webkitMaskImage="none";});// 触屏：按住拖动也能看window.addEventListener("touchmove",e=>{constt=e.touches[0];setMask(t.clientX,t.clientY);},{passive:true});// 提示语 6 秒后淡出setTimeout(()=>{consthint=document.getElementById("hint");hint.style.opacity="0";},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，方便我直接替换成自己的图
中文注释，代码简洁易读