html - CSS 旋转图标动画

Question

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

1.多次旋转图片A，当鼠标移动到图片B上时切换到图片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 Demo

JSFiddle Demo using ultra high speeds