如何实现HTML页面中的鼠标拖尾轨迹动画效果？

本文共计778个文字，预计阅读时间需要4分钟。

伪原创以下内容，不超过100字，不试图解释问题，不数落，直接输出结果：

关键点：

• 每帧只新增一个“尾迹点”，旧点通过 CSS opacity 递减（如每次 ×0.92），而非删除再重绘
• 限制尾迹点总数（建议 ≤30），超出时 shift() 掉最老的，防止内存持续增长
• 监听 mousemove 时加 { passive: true }，避免移动端触发默认行为阻塞

CSS 层叠顺序和 pointer-events 必须设对

拖尾元素必须在鼠标指针下方、页面内容上方，否则会被遮挡或拦截点击。常见错误是把尾迹 div 直接 append 到 body 末尾，结果被 z-index 更高的弹窗盖住。