cursor url 自定義鼠標樣式

cursor可以自定義鼠標，寫法是cursor:url(“圖片路徑”)，pointer;

url:需使用的自定義光標的 URL。圖片類型需要是.cur或.ani和jpg,png等格式的(.cur或.ani的兼容性會更好一些,現在一般也不用考慮兼容性了)。

pointer: 默認的鼠標光標樣式，當沒有找到可用的定義光標時會使用此光標辭官表可自選一個鼠標樣式 auto，pointer等。

.cur和 .ani圖片我們可以用PS來自己制作。

制作方法也很簡單：

1、先創建一個32*32的模板

2、一般我們需要的是png格式的鼠標樣式，所以這里拖入一張選好的png圖片，圖片置入后，在去掉背景

3、按下ctrl+s保存后這里如圖選擇即可先選擇png格式后，在手動改成cur或ani格式的（就是先轉png格式去掉背景在轉成cur或ani圖片,如果不需要考慮兼容性,直接png就行）。

 

手動改成cur或ani格式的

 

之后圖片可能后顯示這樣

我們按以下方式引入到頁面中，打開頁面之后鼠標樣式就發生變換了

body{
        width: 100%;
        height:100vh;
        /* cursor:url(img/23.ani),default; */
        /*cursor:url(img/23.cur),default;*/
        cursor:url(img/o_5997836b66d58.png),auto;
    }

 

效果