文章目录

css3鼠标移到元素上360度旋转

今天逛网易博客,偶然发现他的评论框旁边的头像,鼠标移上去图片会旋转。

觉得这是一个不错的功能,肯定有不小伙伴需要的。

所以就分享相关代码出来。

<style>

.img{transition:all 1.35s linear;-webkit-transition:all 1.35s linear;-moz-transition:all 1.35s linear;-o-transition:all 1.35s linear;}

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

</style>

<img src="rocket.jpg" class="img" />

<div class="img" style="width:200px; height:100px; border:1px #333 solid; display:inline-block;">

鼠标移上这上面来!

</div>

亲自测试一下

可见,不仅仅是使图片旋转,其他元素也都是可以使用的。

用到的最主要的就是transition和transform,当然你也可以将rotate(360deg),改成其他的比如90deg,180deg等等。

本文网址:http://www.santii.com/article/55.html


数据更新时间:2018-11-14