Skip to content

Demo 教程:光标粒子

你将做出一个暗色全屏 Canvas:粒子在屏幕上漂移,被光标吸成圆环,并带上光晕与短拖尾。

这是仓库里的本地示例课,第一章文档链到本站教程页。

课程名Cursor particles
配置examples/demo-course/.course-config/course.yml
源码快照examples/demo-source
章节4 章:骨架 → 粒子 → 跟随 → 光晕

克隆 learn-by-diff 之后,在 Open Course 中选择:

text
examples/demo-course/.course-config/course.yml

不要把整个产品仓库的 git URL 当作课程 url(根目录不是课程根)。

章节

你将得到什么大约时长
01 画布骨架全窗口深色 Canvas,每帧清屏15–25 分钟
02 粒子漂移边缘环绕的漂移圆点15–25 分钟
03 跟随光标空心圆环绕指针,离开页面后散开25–40 分钟
04 光晕与拖尾稳定光晕 + 短拖尾10–20 分钟

扩展里第四章的文档按钮仍指向快照里的 PDF 样例glow/docs.pdf)。本站这一章是同一内容的网页版。

学习建议

  • 先看 Diff,再对照本页步骤。
  • 用任意静态服务器打开 index.html(ES module 需要 http://)。
  • 需要跑参考时,用章节上的参考文件夹;不要点「未开始 / 已完成」,除非你确实要覆盖主工作区。