跳到正文
网页珍奇柜Web Curio

九十年代鼠标特效

90's Cursor Effects,Tim Holman,2016 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步一张铺满窗口、pointer-events:none 的 canvas。
  2. 第 2 步mousemove/touchmove 时在指针位置生成粒子(带初速度、寿命)。
  3. 第 3 步requestAnimationFrame 更新粒子并在空闲时停止循环。
  4. 第 4 步尊重 prefers-reduced-motion 关闭效果。

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Overlay a fixed full-viewport canvas with pointer-events: none and size it with devicePixelRatio. On pointermove, push a few particles at the pointer with random velocity, a lifetime, and a sprite (an emoji pre-rendered to a small offscreen canvas for speed). Update with gravity and fade by remaining life, drop dead particles, and only keep the rAF loop running while particles exist. For a 'following text' variant, store the last N pointer positions and place each character at a lagged position.

档案

交互

能不能拿来用

原作以 MIT (stated in README; no LICENSE file) 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Live site loads (HTTP 200, title "90's Cursor Effects"); repo README 'License: MIT af'.