如何从鼠标点击位置生成Div并实现动态起始位置的左右移动动画？

之前用CSS keyframes做固定位置动画的思路没问题，但要让动画起始点跟着鼠标点击走，我们只需要结合JavaScript来动态控制动画的起始参数就行。这里给你两种实用的方案，按需选择：

方案一：CSS变量 + 关键帧动画（推荐） #

这种方法最简洁，利用CSS变量来动态传递起始位置，不用每次都生成新的动画规则。

实现步骤： #

1. 先定义一个CSS变量和通用的关键帧动画，动画的起始位置直接用变量代替固定值；
2. 监听页面的点击事件，获取鼠标点击的坐标；
3. 动态创建div元素，把鼠标X坐标赋值给CSS变量，再添加上动画类即可。

代码示例： #

/* 定义CSS变量和动画 */
:root {
  --start-left: 0px; /* 默认值，会被JS覆盖 */
}

@keyframes moveRight {
  from {
    left: var(--start-left);
  }
  to {
    left: calc(100% - 50px); /* 减去div宽度，避免移出页面 */
  }
}

.move {
  position: fixed;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: moveRight 1.5s linear forwards;
  border-radius: 4px;
}

// 监听页面点击事件
document.addEventListener('click', (e) => {
  // 创建新的div元素
  const movingDiv = document.createElement('div');
  
  // 把鼠标点击的X坐标赋值给CSS变量
  movingDiv.style.setProperty('--start-left', `${e.clientX}px`);
  // 设置div的垂直位置为鼠标点击的Y坐标
  movingDiv.style.top = `${e.clientY}px`;
  
  // 添加动画类
  movingDiv.classList.add('move');
  
  // 把div添加到页面中
  document.body.appendChild(movingDiv);
});

方案二：动态生成Keyframes规则 #

如果需要更复杂的动画逻辑（比如不同点击对应不同动画曲线），可以每次点击都生成一个唯一的关键帧规则，把起始位置硬编码进去。

代码示例： #

document.addEventListener('click', (e) => {
  // 生成唯一的动画名称，避免冲突
  const uniqueAnimName = `custom-move-${Date.now()}`;
  const clickX = e.clientX;
  const clickY = e.clientY;
  
  // 创建新的style标签，写入动态生成的关键帧
  const styleTag = document.createElement('style');
  styleTag.textContent = `
    @keyframes ${uniqueAnimName} {
      from {
        left: ${clickX}px;
        opacity: 1;
      }
      to {
        left: calc(100% - 50px);
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(styleTag);
  
  // 创建div并设置样式
  const movingDiv = document.createElement('div');
  movingDiv.style.position = 'fixed';
  movingDiv.style.top = `${clickY}px`;
  movingDiv.style.width = '50px';
  movingDiv.style.height = '50px';
  movingDiv.style.backgroundColor = '#e74c3c';
  movingDiv.style.borderRadius = '4px';
  // 应用动态生成的动画
  movingDiv.style.animation = `${uniqueAnimName} 1.5s ease-out forwards`;
  
  document.body.appendChild(movingDiv);
  
  // 动画结束后移除style标签，避免内存冗余
  movingDiv.addEventListener('animationend', () => {
    document.head.removeChild(styleTag);
  });
});

注意事项： #

• 记得给div设置position: fixed或absolute，否则left属性不会生效；
• 终点位置可以根据需求调整，比如用calc(100% - div宽度)避免div完全移出页面；
• 如果需要大量生成这种动画，方案一的性能更好，因为不需要频繁创建和删除style标签。

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