前端vue自定义鼠标指针的图标并且单击鼠标时点击的地方会出现烟花特效

//实现在某一个div内鼠标的指针形状呈自定义的图标  。（也可以全局定义，当前时在某一个div内的实例）
//DOM
<div class="firework-container" @click="createFirework"></div>

//js部分

const createFirework = (event) => {

  const numParticles = Math.floor(Math.random() * 5) + 8; // 随机生成圆圈个数

  const colors =['red', 'green', 'blue', 'yellow', '#ff0000', '#00ff00', '#0000ff', '#FF8888', '#FDD55', '  #BBFF66', '#77FFEE', '#9999FF', '#FF77FF']; // 圆圈可选颜色数组

  const fireworkContainer = document.querySelector('.firework-container');
  for (let i = 0; i < numParticles; i++) {

    const firework = document.createElement('div');

    firework.className = 'firework';

    firework.style.left = event.clientX + 'px';

    firework.style.top = event.clientY + 'px';

    firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; 

    fireworkContainer.appendChild(firework); // 添加到容器中

    //移动的角度随机

    const angle = Math.random() * Math.PI * 2; // 任意角度

    // 移动距离随机

    const distance = Math.random() * 200 + 50; // 随机移动距离50 ~250像素

    const offsetX = Math.cos(angle) * distance;

    const offsetY = Math.sin(angle) * distance;

   //添加css动画

    firework.style.animation = `move 1s linear forwards`;

    firework.style.setProperty('--offsetX', `${offsetX}px`);// 设置x的偏移量

    firework.style.setProperty('--offsetY', `${offsetY}px`); // 设置Y的偏移量

    //动画结束移除小圆圈

    setTimeout(() => {

      firework.remove();

    }, 1000);

  }

};

//CSS样式

<style>

.firework-container {

  cursor: url(/xxx/xxx/xxx.png), auto;   //自定义图标的路径

  position: relative;

  width: 100%;

  height: 100%;

}

.firework {

  position: absolute;

  width: 5px;

  height: 5px;

  border-radius: 50%;

}

@keyframes move {

  0% {

    opacity: 1;

    transform: translate(0);

  }

  100% {

    opacity: 0;

    /* Use custom CSS properties for final position */

    transform: translate(var(--offsetX), var(--offsetY));

  }

}

</style>