WordPress主题中经常会有用户头像鼠标指向后又旋转360特效,这个特效可以使用JQuery实现,也可以直接用CSS实现。CSS实现旋转相对简单一些,我在WordPress主题Log Style中就是用来这个特效。
找到头像的class
WordPress头像使用的是avatar,img中会有avatar,我们对avatar做控制即可。
旋转方法
[cc lang=”css”]
.avatar{
-webkit-transition: 0.6s;
-webkit-transition: -webkit-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
}
.avatar:hover{
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
[/cc]