先看效果：

平常，我们网页的鼠标光标默认是一个白色的箭头，而我换成了一个卡通小萝莉，这样子让网页有趣了许多~其实实现是非常非常简单的，如下：

二.实现：

1.定义img标签，就以一张图片作为鼠标光标，建议为等宽高的图片：

 <img class="mouse" src="img/logo.png" alt="">

2.初始化页面：

 *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
            cursor: none;           
        }

cursor: none; 清除掉页面默认鼠标样式；

3. 鼠标光标图片的css样式：

.mouse{
        width: 50px;
        height: 50px;
        border-radius: 50%;;
        position: absolute;
        left: -200px;
        z-index: 1000;
        pointer-events: none;
    }

z-index: 1000; 显示层级高点；
pointer-events: none; 取消它的鼠标事件，并指向它下面的元素。
position: absolute;
left: -200px; 绝对定位，给个值让它在屏幕外；

4.js部分，实现效果：

  var mouse = document.querySelector('.mouse');
        window.addEventListener('mousemove',function(event){    
            mouse.style.left = event.clientX - mouse.offsetWidth/2 + 'px' ;
            mouse.style.top = event.clientY -mouse.offsetHeight/2 + 'px';       
        })

核心就是获取鼠标在网页中的位置值，并赋值给鼠标光标，再通过绝对定位设置位置即可。
mouse.offsetWidth/2 别忘了减去自身宽（高）的一半。