大致效果就是这个样子了，下面是B2主题,知更鸟主题和其它主题添加头像左右摆动的代码

B2主题

/*头像摆动*/
.user-w-avatar .avatar-parent img,.img-ip:hover{
-webkit-animation:swing 3s .4s ease both;
-moz-animation:swing 3s .4s ease both;}
@-webkit-keyframes swing{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing{
20%,40%,60%,80%,100%{-moz-transform-origin:top center}
20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
100%{-moz-transform:rotate(0deg)}

知更鸟主题

/*头像摆动*/ .about-img img,.author-avatar img,.img-ip:hover{ -webkit-animation:swing 3s .4s ease both; -moz-animation:swing 3s .4s ease both;} @-webkit-keyframes swing{ 20%,40%,60%,80%,100%{-webkit-transform-origin:top center} 20%{-webkit-transform:rotate(15deg)} 40%{-webkit-transform:rotate(-10deg)} 60%{-webkit-transform:rotate(5deg)} 80%{-webkit-transform:rotate(-5deg)} 100%{-webkit-transform:rotate(0deg)} } @-moz-keyframes swing{ 20%,40%,60%,80%,100%{-moz-transform-origin:top center} 20%{-moz-transform:rotate(15deg)} 40%{-moz-transform:rotate(-10deg)} 60%{-moz-transform:rotate(5deg)} 80%{-moz-transform:rotate(-5deg)} 100%{-moz-transform:rotate(0deg)}

其它主题

/*头像摆动*/
.about-img img,.img-ip:hover{
-webkit-animation:swing 3s .4s ease both;
-moz-animation:swing 3s .4s ease both;}
@-webkit-keyframes swing{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing{
20%,40%,60%,80%,100%{-moz-transform-origin:top center}
20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
100%{-moz-transform:rotate(0deg)}

修改about-img，这个懂的应该都知道，这里就不做解释了

分享到：

赞(1) 打赏 生成海报