wordpress知更鸟主题给评论头像添加旋转变圆特效

（转自星光博客）知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的，也没有如图显示的绿色阴影效果。（此代码适用于任何主题，行适当修改class就行）

在原来的基础如你所见，是在Style.css文件添加了以下几行代码实现的。

第一步，首先在Style.css中添加以下代码

/**头像旋转的效果**/

.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);

}

第二步，在Style.css中查找以下代码并用新代码直接覆盖。

（注意：鸟哥主题可直接放入后台自定义风格图方便的，评论图像大小和时间可以看着修改，图像貌似小了点自己看着修改）

旧代码：

.vcard .avatar {

    float: left;

    width: 64px;

    height: 64px;

    margin: 7px 10px 0 0;

    padding: 3px;

    border-radius: 5px;

    border: 1px solid #ddd;

    transition: all 0.8s ease 0s;

}

用以下新代码直接替换。

.vcard .avatar {

    box-shadow:0px 0px 1px;

    float: left;

    width: 40px;

    height: 40px;

    margin: 6px 10px 0 0;

    padding: 2px;

    border: 1px solid #ddd;

    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 {

    box-shadow:0px 0px 10px #0c0;

    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;

}

文章参考来源：堆爱博客 http://duiai.cc/comments-round-the-heads-add-rotation-effects.html/comment-page-3/#comments