CSS实现WordPress评论用户头像旋转特效

这是一个小特效，让评论者的头像动起来，为网站增加一些“生机”。

实现的方法有两种：

第一种：

/*头像旋转特效*/
.avatar{
-webkit-transition:0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
-moz-transition:-moz-transform 0.4s ease-out;
}
.avatar:hover{
transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
}

第二种：

/*头像旋转特效*/
.comment-list .avatar{border: 1px solid #ccc;}
.vcard .avatar {
transition: all 0.8s ease 0s;
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
-ms-transition: 0.8s;
}
.vcard:hover .avatar {
transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
border-radius:40px!important;
filter:alpha(opacity=100)!important;
opacity:1!important;
}

选一种加入主题的CSS文件当中，保存强制刷新即可。

两种方法在特效上有些许差异，可以两种方法分别试下，选择合适自己的；也可自己修改部分参数，达到最佳效果。

在不同的主题上可能会失效，可以多尝试下。