CSS旋转图标动画

Question

如何使用CSS归档以下内容？

1.旋转图像A多次，然后当鼠标在图像上定位时切换到图像B.

2.当鼠标点击或离开图像时，返回图像A.

由于

Answer 1

您可以使用CSS transform和transition属性执行您想要的操作。它非常简单，但您需要使用div background-image代替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 Demo

JSFiddle Demo using ultra high speeds