如何将个人网站光标替换为咖啡图标，实现点击时咖啡倾倒动画效果

这个需求完全可以实现，仅通过原生CSS+少量JavaScript就能完成开发，不需要引入任何第三方依赖，非常适合作为前端练手项目。

1. 提前准备素材 #

你需要提前准备3张背景透明的PNG格式图标，尺寸建议控制在32px-64px之间，避免浏览器识别失败：

• 正常状态的静态咖啡杯图标
• 悬停在可点击元素上的咖啡杯图标（可选，增强交互反馈）
• 咖啡倾倒状态的动画素材（也可以用CSS逐帧动画自行绘制）

2. 全局替换默认光标（CSS实现） #

直接在全局样式中加入以下代码，即可把系统默认光标替换为咖啡图标：

/* 全局通用光标，第二个参数是光标热点坐标，可根据你的图标形状调整到杯口位置 */
* {
  cursor: url('./normal-coffee.png') 4 12, auto;
}

/* 可点击元素的特殊光标状态，强化交互感知 */
a, button, [role="button"], input[type="submit"] {
  cursor: url('./hover-coffee.png') 4 12, pointer;
}

注意事项：自定义光标尺寸不要超过128*128px，且必须设置fallback默认光标（代码里的auto/pointer），避免图标加载失败时完全看不到光标。

3. 点击触发咖啡倾倒效果（CSS+JS实现） #

核心逻辑是监听全局点击事件，在点击位置插入倾倒动画元素，动画播放完成后自动销毁节点，避免DOM冗余。
首先添加动画样式：

/* 倾倒效果元素样式 */
.coffee-spill {
  position: fixed;
  pointer-events: none; /* 不阻挡下层元素的交互 */
  width: 48px;
  height: 48px;
  background: url('./spill-coffee.png') no-repeat center / contain;
  animation: spill-animation 0.8s ease-out forwards;
  z-index: 99999; /* 保证在页面最上层展示 */
}

/* 倾倒动画，角度、位移参数可根据你的需求调整 */
@keyframes spill-animation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -20%) rotate(60deg) scale(1.2);
  }
}

再添加全局监听的JS代码，放在页面底部或者DOM加载完成的回调中即可：

document.addEventListener('click', (e) => {
  const spillEl = document.createElement('div');
  spillEl.classList.add('coffee-spill');
  // 定位到点击坐标
  spillEl.style.left = `${e.clientX}px`;
  spillEl.style.top = `${e.clientY}px`;
  document.body.appendChild(spillEl);
  // 动画结束后自动销毁节点
  setTimeout(() => spillEl.remove(), 800);
})

• 可以给光标添加微小的跟随晃动效果，模拟咖啡液晃动的质感
• 复杂交互区域（比如富文本编辑器、表单输入框）可以单独设置保留默认光标，避免影响正常使用
• 倾倒效果可以替换为雪碧图逐帧动画，实现咖啡液流出的细腻动态

内容的提问来源于stack exchange，提问作者muserresearch