CSS - 光標轉換

是否可以使用CSS過渡動畫光標的狀態？我試過這段代碼，但它似乎不工作。CSS - 光標轉換

.test{ 
 
    cursor:default; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 

 
.test:hover{ 
 
    cursor: pointer; 
 
    -moz-transition: cursor 500ms ease-in-out; 
 
    -o-transition: cursor 500ms ease-in-out; 
 
    -webkit-transition: cursor 500ms ease-in-out; 
 
    transition: cursor 500ms ease-in-out; 
 
}

<div class="test"></div>

感謝

來源

2016-08-04 Alessio

你期望/希望發生的事情？你如何定義一個「默認」和「指針」之間的遊標？ –

@NiettheDarkAbsol不，我的意思是一個平滑的過渡，就像你可以用不透明或其他CSS屬性 – Alessio

爲什麼你想改變光標？ - 轉換隻會爲頁面上的項目添加動畫，這就是CSS的用途。要做到這一點，你可能需要嘗試一些類似於javascript的東西。但我不會真的推薦它 – Andrew

這僅僅是不可能的CSS。過渡只適用於動畫特性;而不出現cursor。有關動畫道具的完整列表，請查看here。

請注意，您也可以將.gif作爲.cursor元素;請記住，在不同的瀏覽器上會有相應的大小限制。

來源

2016-08-04 12:32:24

並非所有瀏覽器都支持GIF作爲遊標格式。您還應該有一個ANI光標文件作爲替代。 –

Cursor不是一個可動畫的屬性，如果它是誠實的，它會有點奇怪。如果你想創建一個動畫我建議建立一個GIF將開始爲default，並最終爲pointer。

然後你就可以使用GIF如圖所示：

.test:hover { 
    cursor: url("your-image.gif"), auto; 
}

來源

2016-08-04 12:36:25

這可能是一個不錯的解決方案，我會試試！ – Alessio

請記住，不同的人有不同的指針。當然，很多人可能會有默認的Windows設置，但不是每個人都在Windows上開始。所以，如果你去做這樣的事情，你需要用你自己的主題重寫* all *遊標。 –

@NiettheDarkAbsol True！：\ – Alessio

您可以通過CSS指定URL到它：

.test{ 
    cursor:default; 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

.test:hover{   
    cursor:url(smiley.gif),url(myBall.cur),auto; 
}

來源

2016-08-04 12:45:37

CSS - 光標轉換

回答

相關問題