实现按钮点击生成上浮消失的+1粒子效果（类似Cookie Clicker）

核心思路 #

不用依赖第三方库，直接通过原生JS+CSS就能实现需求：每次点击按钮时创建一个包含“+1”的元素，设置基于点击位置的初始坐标，通过CSS动画让它向上漂浮并逐渐透明，最后自动移除元素。

完整代码示例 #

HTML结构

<button id="clickBtn">点击生成+1</button>
<div id="particleContainer"></div>

CSS样式

#particleContainer {
  position: relative;
  min-height: 300px; /* 给粒子预留足够的漂浮空间 */
}

.particle {
  position: absolute;
  color: #4CAF50;
  font-weight: bold;
  pointer-events: none; /* 避免粒子干扰按钮点击 */
  animation: floatUp 1.5s ease-out forwards;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px); /* 自定义向上移动的距离 */
  }
}

JavaScript逻辑

const btn = document.getElementById('clickBtn');
const container = document.getElementById('particleContainer');

btn.addEventListener('click', (e) => {
  // 创建粒子元素
  const particle = document.createElement('span');
  particle.className = 'particle';
  particle.textContent = '+1';

  // 计算粒子初始位置（基于按钮的点击坐标）
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left - particle.offsetWidth / 2;
  const y = e.clientY - rect.top - particle.offsetHeight / 2;
  
  particle.style.left = `${x}px`;
  particle.style.top = `${y}px`;

  // 将粒子添加到容器
  container.appendChild(particle);

  // 动画结束后移除粒子，避免DOM节点堆积
  setTimeout(() => {
    particle.remove();
  }, 1500); // 时长和CSS动画保持一致
});

关键细节说明 #

• 精准定位：通过getBoundingClientRect()获取按钮的位置信息，结合点击坐标计算粒子初始位置，确保粒子从点击点附近生成。
• 动画效果：使用CSS动画floatUp实现向上漂浮+透明渐变的组合效果，forwards关键字让动画停在最后一帧状态。
• 性能优化：动画结束后通过setTimeout移除粒子元素，防止页面DOM节点过多影响性能。

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