超简单的自定义个性化网页鼠标光标样式 html+css+js

Posted 2021-08-14 北极光之夜。

话不多，看效果先：

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

二.实现：

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 别忘了减去自身宽（高）的一半。

四.总结：

是不是很简单~
下次见啦~

其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~