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

古城微笑少年丶 2023-01-24 04:21 36阅读 0赞

## 话不多，看效果先： ##

![在这里插入图片描述][2021071621045737.gif_pic_center]  
好久不见~ 平常，我们网页的鼠标光标默认是一个白色的**箭头**，而我换成了一个**卡通**小萝莉，这样子让网页**有趣**了许多~其实实现是非常非常简单的，如下：

## 二.实现： ##

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

**2.初始化页面：**

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

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

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

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

z-index: 1000; 显示层级高点；  
pointer-events: none; 取消它的鼠标事件，并指向它下面的元素。  
position: fixed;  
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 别忘了减去自身宽（高）的一半。

## 四.总结： ##

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

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

[2021071621045737.gif_pic_center]: /images/20221004/095f73ecd5df4a81ad84bd64468f295e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/09b9bf006807445a8a6d999070f897aa.png
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/116452424
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 4]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 1]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343