CSS - カーソル遷移

Question

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>

おかげ

Answer 1

。遷移はアニメーション可能なプロパティでのみ動作します; cursorは表示されません。アニメーション可能な小道具の完全なリストについては、hereをチェックしてください。

.cursor要素には.gifを指定することもできます。念頭に置いて、異なるブラウザに応じて一定のサイズ制限が適用されます。

Answer 2

Cursorはアニメーション可能なプロパティではなく、正直であれば奇妙なものです。あなたは、私が作成することをお勧めアニメーションを作成したい場合はdefaultとして開始し、pointerとして終わるだろうGIF。示すように

その後、GIFことを使用することができます。

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

Answer 3

をすることができます、CSSでそれへのURLを指定することで：

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

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