//实现在某一个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>
