网站评论区头像添加旋转效果

每次浏览一些网站时当我们的鼠标滑过评论区时评论者的头像都会滴溜溜地旋转起来，感觉这个效果特别的酷炫，对于任何一个喜欢折腾的WPer来说，如果不将这效果添加到自己的网站上去似乎都不像话。自己从网上搜了好长时间代码，但是发现很多代码都不管用，无奈自己只好在一些现有代码的基础上学习改动，最终让我搞出来了这个效果，如果你也想在自己的网站上添加这个效果不妨也来试试。

我所使用的主题是DUX主题，这次对主题的修改也仅仅改动了main.css这一个文件，大家在修改前做好文件的备份。对于其他的主题可能需要添加下面的代码到style.css文件中去，当然对于一些主题可能也像DUX主题一样有单独的主样式文件，我们只需要将下面的代码添加到该文件中即可。

/*Gravatar头像旋转*/
.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);
}

这段代码是对Gravatar头像实现的头像旋转效果，如果你的主题不支持Gravatar头像这个效果可能不起作用，另外如果你想申请一个Gravatar头像并设置自己的个性化头像的话可以参考我之前文章：WordPress站点全球通用Gravatar头像注册