CSS旋轉圖標動畫

Question

如何使用CSS歸檔以下內容？

1.旋轉圖像A多次，然后當鼠標在圖像上定位時切換到圖像B。

2.單擊鼠標或離開圖像時，旋轉回到圖像A。

謝謝

Answer 1

您可以通過使用CSS transform和transition屬性來執行所需的操作。 這確實很容易，但是您需要使用帶有background-image的div而不是img標簽：

div{
    width:50px;
    height:50px;
    background:url("normalImage.png");
    transition:2.5s; /* Transition duration */
}
div:hover{
    background:url("imageThatAppearsAfterHovering.png");
    -o-transform:rotate(720deg);
    -ms-transform:rotate(720deg);
    -moz-transform:rotate(720deg);
    -webkit-transform:rotate(720deg);
    transform:rotate(720deg); /* How many times it'll rotate = degrees÷360 */
}

JSFiddle演示

使用超高速的JSFiddle演示