前端特定形状（如箭头）的图片替换原本的鼠标，并且让箭头随着鼠标滑动的方向旋转

首先，为了替换鼠标，你需要一张用于替换的图片，例如箭头。在这里我们假设这张图片已经存在而且可以通过 url 获取。

HTML:

<div id="cursor"></div>

CSS:

#cursor {
    position: absolute;
    width: 25px;
    height: 25px;
    background: url('https://p16-flow-sign-va.ciciai.com/ocean-cloud-tos-us/6c4ce69150624afeadf24ef7e96121aa.png~tplv-6bxrjdptv7-image.png?rk3s=18ea6f23&x-expires=1750487682&x-signature=QMBctCtmemeaGfaRAYjK54x2cn0%3D') no-repeat center center; 
    pointer-events: none;
    background-size: contain;
}

JavaScript:

var img = document.getElementById('cursor');
var angle = 0;

document.addEventListener('mousemove', function(e) {
    img.style.left = e.pageX - img.width / 2 + 'px';
    img.style.top = e.pageY - img.height / 2 + 'px';
});

document.addEventListener('mousemove', function(e) {
    var x = e.movementX;
    var y = e.movementY;
    angle = Math.atan2(y, x) * 180 / Math.PI;
    img.style.transform = 'rotate(' + angle + 'deg)';
});

这段代码首先获取到创建的图片元素，然后监测鼠标的移动，通过样式设置将图片移到鼠标的位置上。第二个监听器用于检测鼠标的滑动轨迹，使用了atan2函数来计算鼠标移动方向的角度，然后通过CSS的transform属性的rotate对图片进行旋转。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！