为WordPress评论头像添加圆形并旋转的方法

1
3,575℃

A+

估计现在大家在浏览一些博客时，会发现博客评论栏里的头像是圆形并且鼠标移上去还能有360°旋转动画效果。其实，要此效果一点也不难，是纯CSS样式即可实现。在这里分享给大家。

在我的评论栏中头像已有此效果，可以往下看一下。

评论栏里的头像使用的是默认的avatar样式，找到主题目录下Style.css，在最下面添加如下css样式代码即可。(IE浏览器暂不支持旋转,chrome支持)
首先设置头像是圆形

.avatar{
/*设置圆形*/
-webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding: 2px;border: 1px solid #ddd;background: #fff}

.avatar{

/*设置圆形*/

-webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding: 2px;border: 1px solid #ddd;background: #fff}

增加旋转动画效果

.avatar:hover{
/*旋转动画*/
transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);border-radius: 30px!important}

.avatar:hover{

/*旋转动画*/

transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);border-radius: 30px!important}

编辑保存好后，ctrl+F5刷新网页，效果应该就有了。