给图片或文字加上鼠标悬浮时旋转动画

一个很简单的css即可实现图片或文字鼠标悬浮时旋转动画。这里就简单的说一下2d旋转。
首先用到 transform 属性,具体代码如下:

transform:rotate(360deg);
-ms-transform:rotate(360deg); 	/* IE 9 */
-moz-transform:rotate(360deg); 	/* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); 	/* Opera */
其中 -ms-transform 支持IE9浏览器,-moz-transform 支持火狐浏览器,-webkit-transform 支持苹果浏览器和谷歌浏览器,-o-transform 支持欧朋浏览器。
一般想要适用所有浏览器,就全部都加上。后面的注释可以自己删掉。360deg 表示旋转360度,自己修改就行了。

然后,鼠标悬浮就需要用到 hover ,结合上述 transform 属性,具体css代码即为:

example-img:hover {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
}
这时已经实现了鼠标悬浮到图片上时,图片旋转360度。但是,是看不到旋转动画的,因为是秒选转。所以这时需要用到 transition 属性,结合上述代码。 

html示例代码

<img class="example-img" src="图片地址" /> 

css示例代码

 .example-img:hover {
 transform:rotate(360deg);
 -ms-transform:rotate(360deg); 
 -moz-transform:rotate(360deg); 
 -webkit-transform:rotate(360deg); 
 -o-transform:rotate(360deg); 
 transition:.5s;
 -webkit-transition:.5s;
 -moz-transition:.5s;
 -o-transition:.5s
 }


其中 .5s 为过渡时间,自己修改下。

相关推荐

发表评论

路人甲

网友评论(0)