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

//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>