html+css：自定义鼠标指针图案

 

应该会有人喜欢这种自定义的鼠标指针吧

 

                                                                                

 

想要在html中自定义鼠标指针，只需要在body中加上这么一句话

1.本地图片版 ---------  .png .jpg图片格式     (上传了两个鼠标指针图片，可自行下载。)

body{

cursor:url('图片地址'),auto;

}

PS：   图片分辨率建议32px。

 

 

2.网址版(不稳定) ----------- .cur后缀

例如：

<!-- 格式 -->
body {
    cursor: url(https://images.cnblogs.com/cnblogs_com/jingjingjingjingjingjingrj/1701449/o_200415081944o_cursor.png),auto;
}



<!-- 4月28日扩展 猫咪鼠标 -->

body {  
    cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/normal.cur), auto;
}


a {
    cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/ayuda.cur), auto
}

a:active {
    cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/work.cur), alias
}

p {
    cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/texto.cur), auto
}

span {
   cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/No_Disponible.cur), auto;
}



<!-- 4月29日扩展 花瓣鼠标 -->
body {  
    cursor: cursor: url(https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/normal.cur),auto;   /*一瓣*/
}

a{
	cursor: url(https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/ayuda.cur) 15 15,auto;  /*五瓣*/
}

p{
	cursor: url(https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/texto.cur),auto; 
}

span {
cursor: url(https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/No_Disponible.cur),auto;     /*叉号花瓣*/
}



body{
    cursor: url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/normal.cur), auto    /*铅笔*/
	}

p{
	cursor: url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/texto.cur), auto    /*小鸡*/
}	

a{
	cursor: url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/ayuda.cur), auto    /**/
}

a:active {cursor: url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/work.cur), alias
}

span {
	cursor: url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.2/cur/work.cur, auto    /*倒鸡*/
}



<!-- 4月30日扩展 表情包鼠标 -->
body {
    cursor: url(https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Nor.cur), auto;
}

a {
cursor: url(https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Ayu.cur), auto;
}

a:active {
    cursor: url(https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Work.cur), alias;
}

p {
cursor: url(https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Texto.cur), auto;
}

span{
cursor: url(https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/no.cur), auto;
}

鼠标指针网址

http://www.desktx.com/cursors/

 

完成～～～

 

 

（￣へ￣）不要白嫖！！顺手留赞好习惯～～～～