网站谈论区头像增加旋转作用

115资源网 2022年5月11日实用教程, 技术分享浏览：28 0

每次阅读一些网站时当咱们的鼠标滑过谈论区时谈论者的头像都会滴溜溜地旋转起来，觉得这个作用特别的酷炫，关于任何一个喜欢折腾的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头像注册

相关文章