[英]CSS Rotate Icon Animation
How do I archive the following using CSS? 如何使用CSS归档以下内容?
1.Rotates image A multiple times then switch to image B when the mouse positions on the image. 1.旋转图像A多次,然后当鼠标在图像上定位时切换到图像B。
2.Rotates back to image A when mouse clicks or leave the image. 2.单击鼠标或离开图像时,旋转回到图像A。
Thanks 谢谢
You can do what you want by using CSS transform
and transition
properties. 您可以通过使用CSS transform
和transition
属性来执行所需的操作。 It's really easy, but you'll need to use a div
with background-image
instead of an img
tag: 这确实很容易,但是您需要使用带有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 */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.