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

2024-06-06 15:56:59

话不多，看效果先：

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

二.实现：

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

四.总结：

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

其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 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总结笔记
…等等
进我主页看更多~

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

UE4/UE5 虚幻引擎，设置Mouse Cursor鼠标光标样式
UE虚幻引擎,设置Mouse Cursor鼠标光标样式的两种方法: 第一种.使用Player Controller中内部提供的鼠标样式. 第二种.在Project Settings项目设置的Softw ...
HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计...
HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~ 临近期末, 你还在为HTML网页设 ...
web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
HTML5七夕情人节表白网页(圣诞雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤圣诞雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序 ...
网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
java createcustomcursor,CustomCursor插件：自定义你的鼠标光标
Custom Cursor for Chrome 在你们新标签页争奇斗艳的时候,有没有人考虑过鼠标光标的感受? 没有,一个都没有. 你们只在乎壁纸有没有逼格,图标好不好看,天气预报准不准,却没有一 ...
CSS控制鼠标光标样式
Cursor Cursor是网页制作CSS中的光标类型,与图标文件Icon一样,是特殊类型的小位图. 实例 #disabled{cursor:auto; } 其他取值说明属性备注 auto 默认值 ...
鼠标箭头光标样式插件MagicMouse.js
下载地址 MagicMouse.js是一个自定义鼠标光标类库,基于vue实现,用来创建一个很酷的,互动的光标跟随鼠标指针的一个圆样式.需要隐藏系统默认光标样式html,* { cursor: none ...
Unity 按住A键更改鼠标光标样式
按住A键更改为准星样式首先自己抠图抠出个准星,要png格式的图片然后在准星的Inspector面板里更改Texture Type为Cursor (一定要修改,不然会显示不正确) 然后创建脚本挂载到 ...
kde 配置桌面_在KDE桌面中为GTK应用程序配置鼠标光标样式
kde 配置桌面 Update on Jan. 7, 2012: The package for the gtk application style setting on KDE 4.7 is kcm ...

最新文章

热门文章