多说评论上篇之自定义CSS头像

前言

---

多说是一款社会化评论系统，它改变了网站与用户之间，用户与用户之间的互动方式。当然Disqus在大家心目中可能更加具有影响力，而多说“接地气的本地化评论托管服务”则让人眼前一亮。
　　在WordPress和GitHub+Hexo搭建的静态Blog我们常常使用多说、畅言等评论系统，但是官方的配色和布局往往和我们的网站不太融合，所以我们要对其进行适当的美化。
　　接下来我们就要谈论我们的多说评论框上篇之自定义CSS头像，话不多说，切入正题~

多说自定义CSS

---

以下是整理出来的十一种头像特效，各种效果都以GIF动态图呈现，可以很直观的看到效果。毕竟是图片，实际效果当然会更好的多。代码在最下面

效果一

效果二

效果三

效果四

效果五

效果六

效果七

效果八

效果九

效果十

效果十一

附录：CSS代码

---

代码在下面(请用非IE浏览器看)，设置步骤超级简单，登录多说后台->设置->基本设置->自定义CSS，将代码粘贴自定义CSS 里，刷新即可看到效果。
ps：代码都是共通的，不局限于多说，应用在别的效果上也是可以的。

头像效果一

#ds-reset.ds-avatarimg,#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:1s; 
-moz-animation-duration:1s; 
-ms-animation-duration:1s; 
-o-animation-duration:1s; 
animation-duration:1s; 
} 

@-webkit-keyframesrotateInDownLeft{ 
0%{ 
-webkit-transform-origin:leftbottom; 
-webkit-transform:rotate(-90deg); 
opacity:0; 
} 
 
100%{ 
-webkit-transform-origin:leftbottom; 
-webkit-transform:rotate(0); 
opacity:1; 
} 
} 

@-moz-keyframesrotateInDownLeft{ 
0%{ 
-moz-transform-origin:leftbottom; 
-moz-transform:rotate(-90deg); 
opacity:0; 
} 
 
100%{ 
-moz-transform-origin:leftbottom; 
-moz-transform:rotate(0); 
opacity:1; 
} 
} 

@-o-keyframesrotateInDownLeft{ 
0%{ 
-o-transform-origin:leftbottom; 
-o-transform:rotate(-90deg); 
opacity:0; 
} 
 
100%{ 
-o-transform-origin:leftbottom; 
-o-transform:rotate(0); 
opacity:1; 
} 
} 

@keyframesrotateInDownLeft{ 
0%{ 
transform-origin:leftbottom; 
transform:rotate(-90deg); 
opacity:0; 
} 
 
100%{ 
transform-origin:leftbottom; 
transform:rotate(0); 
opacity:1; 
} 
} 

#ds-reset.ds-avatarimg{ 
-webkit-animation-name:rotateInDownLeft; 
-moz-animation-name:rotateInDownLeft; 
-o-animation-name:rotateInDownLeft; 
animation-name:rotateInDownLeft; 
} 

#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-name:rotateOutDownLeft; 
-moz-animation-name:rotateOutDownLeft; 
-o-animation-name:rotateOutDownLeft; 
animation-name:rotateOutDownLeft; 
} 
@-webkit-keyframesrotateOutDownLeft{ 
0%{ 
-webkit-transform-origin:leftbottom; 
-webkit-transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
-webkit-transform-origin:leftbottom; 
-webkit-transform:rotate(90deg); 
opacity:0; 
} 
} 

@-moz-keyframesrotateOutDownLeft{ 
0%{ 
-moz-transform-origin:leftbottom; 
-moz-transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
-moz-transform-origin:leftbottom; 
-moz-transform:rotate(90deg); 
opacity:0; 
} 
} 

@-o-keyframesrotateOutDownLeft{ 
0%{ 
-o-transform-origin:leftbottom; 
-o-transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
-o-transform-origin:leftbottom; 
-o-transform:rotate(90deg); 
opacity:0; 
} 
} 

@keyframesrotateOutDownLeft{ 
0%{ 
transform-origin:leftbottom; 
transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
transform-origin:leftbottom; 
transform:rotate(90deg); 
opacity:0; 
} 
}

头像效果二

#ds-reset.ds-avatarimg,#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:0.7s; 
-moz-animation-duration:0.7s; 
-ms-animation-duration:0.7s; 
-o-animation-duration:0.7s; 
animation-duration:0.7s; 
} 

@-webkit-keyframesbounceIn{ 
0%{ 
opacity:0; 
-webkit-transform:scale(.3); 
} 
 
50%{ 
opacity:1; 
-webkit-transform:scale(1.05); 
} 
 
70%{ 
-webkit-transform:scale(.9); 
} 
 
100%{ 
-webkit-transform:scale(1); 
} 
} 

@-moz-keyframesbounceIn{ 
0%{ 
opacity:0; 
-moz-transform:scale(.3); 
} 
 
50%{ 
opacity:1; 
-moz-transform:scale(1.05); 
} 
 
70%{ 
-moz-transform:scale(.9); 
} 
 
100%{ 
-moz-transform:scale(1); 
} 
} 

@-o-keyframesbounceIn{ 
0%{ 
opacity:0; 
-o-transform:scale(.3); 
} 
 
50%{ 
opacity:1; 
-o-transform:scale(1.05); 
} 
 
70%{ 
-o-transform:scale(.9); 
} 
 
100%{ 
-o-transform:scale(1); 
} 
} 

@keyframesbounceIn{ 
0%{ 
opacity:0; 
transform:scale(.3); 
} 
 
50%{ 
opacity:1; 
transform:scale(1.05); 
} 
 
70%{ 
transform:scale(.9); 
} 
 
100%{ 
transform:scale(1); 
} 
} 

#ds-reset.ds-avatarimg{ 
-webkit-animation-name:bounceIn; 
-moz-animation-name:bounceIn; 
-o-animation-name:bounceIn; 
animation-name:bounceIn; 
} 
@-webkit-keyframesbounceOut{ 
0%{ 
-webkit-transform:scale(1); 
} 
 
25%{ 
-webkit-transform:scale(.95); 
} 
 
50%{ 
opacity:1; 
-webkit-transform:scale(1.1); 
} 
 
100%{ 
opacity:0; 
-webkit-transform:scale(.3); 
} 
} 

@-moz-keyframesbounceOut{ 
0%{ 
-moz-transform:scale(1); 
} 
 
25%{ 
-moz-transform:scale(.95); 
} 
 
50%{ 
opacity:1; 
-moz-transform:scale(1.1); 
} 
 
100%{ 
opacity:0; 
-moz-transform:scale(.3); 
} 
} 

@-o-keyframesbounceOut{ 
0%{ 
-o-transform:scale(1); 
} 
 
25%{ 
-o-transform:scale(.95); 
} 
 
50%{ 
opacity:1; 
-o-transform:scale(1.1); 
} 
 
100%{ 
opacity:0; 
-o-transform:scale(.3); 
} 
} 

@keyframesbounceOut{ 
0%{ 
transform:scale(1); 
} 
 
25%{ 
transform:scale(.95); 
} 
 
50%{ 
opacity:1; 
transform:scale(1.1); 
} 
 
100%{ 
opacity:0; 
transform:scale(.3); 
} 
} 

#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-name:bounceOut; 
-moz-animation-name:bounceOut; 
-o-animation-name:bounceOut; 
animation-name:bounceOut; 
}

头像效果三

#ds-reset.ds-avatarimg,#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:0.7s; 
-moz-animation-duration:0.7s; 
-ms-animation-duration:0.7s; 
-o-animation-duration:0.7s; 
animation-duration:0.7s; 
} 

@-webkit-keyframesrotateIn{ 
0%{ 
-webkit-transform-origin:centercenter; 
-webkit-transform:rotate(-150deg); 
opacity:0; 
} 
 
100%{ 
-webkit-transform-origin:centercenter; 
-webkit-transform:rotate(0); 
opacity:1; 
} 
} 
@-moz-keyframesrotateIn{ 
0%{ 
-moz-transform-origin:centercenter; 
-moz-transform:rotate(-150deg); 
opacity:0; 
} 
 
100%{ 
-moz-transform-origin:centercenter; 
-moz-transform:rotate(0); 
opacity:1; 
} 
} 
@-o-keyframesrotateIn{ 
0%{ 
-o-transform-origin:centercenter; 
-o-transform:rotate(-150deg); 
opacity:0; 
} 
 
100%{ 
-o-transform-origin:centercenter; 
-o-transform:rotate(0); 
opacity:1; 
} 
} 
@keyframesrotateIn{ 
0%{ 
transform-origin:centercenter; 
transform:rotate(-150deg); 
opacity:0; 
} 
 
100%{ 
transform-origin:centercenter; 
transform:rotate(0); 
opacity:1; 
} 
} 

#ds-reset.ds-avatarimg{ 
-webkit-animation-name:rotateIn; 
-moz-animation-name:rotateIn; 
-o-animation-name:rotateIn; 
animation-name:rotateIn; 
} 
@-webkit-keyframesrotateOut{ 
0%{ 
-webkit-transform-origin:centercenter; 
-webkit-transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
-webkit-transform-origin:centercenter; 
-webkit-transform:rotate(150deg); 
opacity:0; 
} 
} 

@-moz-keyframesrotateOut{ 
0%{ 
-moz-transform-origin:centercenter; 
-moz-transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
-moz-transform-origin:centercenter; 
-moz-transform:rotate(150deg); 
opacity:0; 
} 
} 

@-o-keyframesrotateOut{ 
0%{ 
-o-transform-origin:centercenter; 
-o-transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
-o-transform-origin:centercenter; 
-o-transform:rotate(150deg); 
opacity:0; 
} 
} 

@keyframesrotateOut{ 
0%{ 
transform-origin:centercenter; 
transform:rotate(0); 
opacity:1; 
} 
 
100%{ 
transform-origin:centercenter; 
transform:rotate(150deg); 
opacity:0; 
} 
} 

#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-name:rotateOut; 
-moz-animation-name:rotateOut; 
-o-animation-name:rotateOut; 
animation-name:rotateOut; 
}

头像效果四

#ds-reset.ds-avatarimg,#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:0.7s; 
-moz-animation-duration:0.7s; 
-ms-animation-duration:0.7s; 
-o-animation-duration:0.7s; 
animation-duration:0.7s; 
} 

@-webkit-keyframesrollIn{ 
0%{opacity:0;-webkit-transform:translateX(-100%)rotate(-120deg);} 
100%{opacity:1;-webkit-transform:translateX(0px)rotate(0deg);} 
} 

@-moz-keyframesrollIn{ 
0%{opacity:0;-moz-transform:translateX(-100%)rotate(-120deg);} 
100%{opacity:1;-moz-transform:translateX(0px)rotate(0deg);} 
} 

@-o-keyframesrollIn{ 
0%{opacity:0;-o-transform:translateX(-100%)rotate(-120deg);} 
100%{opacity:1;-o-transform:translateX(0px)rotate(0deg);} 
} 

@keyframesrollIn{ 
0%{opacity:0;transform:translateX(-100%)rotate(-120deg);} 
100%{opacity:1;transform:translateX(0px)rotate(0deg);} 
} 

#ds-reset.ds-avatarimg{ 
-webkit-animation-name:rollIn; 
-moz-animation-name:rollIn; 
-o-animation-name:rollIn; 
animation-name:rollIn; 
} 


@-webkit-keyframesrollOut{ 
0%{ 
opacity:1; 
-webkit-transform:translateX(0px)rotate(0deg); 
} 

100%{ 
opacity:0; 
-webkit-transform:translateX(100%)rotate(120deg); 
} 
} 

@-moz-keyframesrollOut{ 
0%{ 
opacity:1; 
-moz-transform:translateX(0px)rotate(0deg); 
} 

100%{ 
opacity:0; 
-moz-transform:translateX(100%)rotate(120deg); 
} 
} 

@-o-keyframesrollOut{ 
0%{ 
opacity:1; 
-o-transform:translateX(0px)rotate(0deg); 
} 

100%{ 
opacity:0; 
-o-transform:translateX(100%)rotate(120deg); 
} 
} 

@keyframesrollOut{ 
0%{ 
opacity:1; 
transform:translateX(0px)rotate(0deg); 
} 

100%{ 
opacity:0; 
transform:translateX(100%)rotate(120deg); 
} 
} 

#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-name:rollOut; 
-moz-animation-name:rollOut; 
-o-animation-name:rollOut; 
animation-name:rollOut; 
}

头像效果五

#ds-reset.ds-avatarimg,#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:0.7s; 
-moz-animation-duration:0.7s; 
-ms-animation-duration:0.7s; 
-o-animation-duration:0.7s; 
animation-duration:0.7s; 
} 

@-webkit-keyframesswing{ 
20%,40%,60%,80%,100%{-webkit-transform-origin:topcenter;} 
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-keyframesswing{ 
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);} 
} 

@-o-keyframesswing{ 
20%{-o-transform:rotate(15deg);} 
40%{-o-transform:rotate(-10deg);} 
60%{-o-transform:rotate(5deg);} 
80%{-o-transform:rotate(-5deg);} 
100%{-o-transform:rotate(0deg);} 
} 

@keyframesswing{ 
20%{transform:rotate(15deg);} 
40%{transform:rotate(-10deg);} 
60%{transform:rotate(5deg);} 
80%{transform:rotate(-5deg);} 
100%{transform:rotate(0deg);} 
} 

#ds-reset.ds-avatarimg:hover{ 
-webkit-transform-origin:topcenter; 
-moz-transform-origin:topcenter; 
-o-transform-origin:topcenter; 
transform-origin:topcenter; 
-webkit-animation-name:swing; 
-moz-animation-name:swing; 
-o-animation-name:swing; 
animation-name:swing; 
} 

头像效果六

#ds-reset.ds-avatarimg,#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:0.7s; 
-moz-animation-duration:0.7s; 
-ms-animation-duration:0.7s; 
-o-animation-duration:0.7s; 
animation-duration:0.7s; 
} 

@-webkit-keyframespulse{ 
0%{-webkit-transform:scale(1);} 
50%{-webkit-transform:scale(1.1);} 
100%{-webkit-transform:scale(1);} 
} 
@-moz-keyframespulse{ 
0%{-moz-transform:scale(1);} 
50%{-moz-transform:scale(1.1);} 
100%{-moz-transform:scale(1);} 
} 
@-o-keyframespulse{ 
0%{-o-transform:scale(1);} 
50%{-o-transform:scale(1.1);} 
100%{-o-transform:scale(1);} 
} 
@keyframespulse{ 
0%{transform:scale(1);} 
50%{transform:scale(1.1);} 
100%{transform:scale(1);} 
} 

#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-name:pulse; 
-moz-animation-name:pulse; 
-o-animation-name:pulse; 
animation-name:pulse; 
} 

头像效果七

#ds-reset.ds-avatarimg,#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:0.7s; 
-moz-animation-duration:0.7s; 
-ms-animation-duration:0.7s; 
-o-animation-duration:0.7s; 
animation-duration:0.7s; 
} 

@-webkit-keyframeswobble{ 
0%{-webkit-transform:translateX(0%);} 
15%{-webkit-transform:translateX(-25%)rotate(-5deg);} 
30%{-webkit-transform:translateX(20%)rotate(3deg);} 
45%{-webkit-transform:translateX(-15%)rotate(-3deg);} 
60%{-webkit-transform:translateX(10%)rotate(2deg);} 
75%{-webkit-transform:translateX(-5%)rotate(-1deg);} 
100%{-webkit-transform:translateX(0%);} 
} 

@-moz-keyframeswobble{ 
0%{-moz-transform:translateX(0%);} 
15%{-moz-transform:translateX(-25%)rotate(-5deg);} 
30%{-moz-transform:translateX(20%)rotate(3deg);} 
45%{-moz-transform:translateX(-15%)rotate(-3deg);} 
60%{-moz-transform:translateX(10%)rotate(2deg);} 
75%{-moz-transform:translateX(-5%)rotate(-1deg);} 
100%{-moz-transform:translateX(0%);} 
} 

@-o-keyframeswobble{ 
0%{-o-transform:translateX(0%);} 
15%{-o-transform:translateX(-25%)rotate(-5deg);} 
30%{-o-transform:translateX(20%)rotate(3deg);} 
45%{-o-transform:translateX(-15%)rotate(-3deg);} 
60%{-o-transform:translateX(10%)rotate(2deg);} 
75%{-o-transform:translateX(-5%)rotate(-1deg);} 
100%{-o-transform:translateX(0%);} 
} 

@keyframeswobble{ 
0%{transform:translateX(0%);} 
15%{transform:translateX(-25%)rotate(-5deg);} 
30%{transform:translateX(20%)rotate(3deg);} 
45%{transform:translateX(-15%)rotate(-3deg);} 
60%{transform:translateX(10%)rotate(2deg);} 
75%{transform:translateX(-5%)rotate(-1deg);} 
100%{transform:translateX(0%);} 
} 

#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-name:wobble; 
-moz-animation-name:wobble; 
-o-animation-name:wobble; 
animation-name:wobble; 
} 

头像效果八

#ds-reset.ds-avatarimg{ 
width:54px;height:54px;/*设置图像的长和宽，这里要根据自己的评论框情况更改*/
border-radius:27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius:27px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px; 
box-shadow:inset0-1px0#3333sf;/*设置图像阴影效果*/
-webkit-box-shadow:inset0-1px0#3333sf; 
-webkit-transition:0.4s; 
-webkit-transition:-webkit-transform0.4sease-out; 
transition:transform0.4sease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
-moz-transition:-moz-transform0.4sease-out; 
} 
#ds-reset.ds-avatarimg:hover{/*设置鼠标悬浮在头像时的CSS样式*/
box-shadow:0010px#fff;rgba(255,255,255,.6),inset0020pxrgba(255,255,255,1); 
-webkit-box-shadow:0010px#fff;rgba(255,255,255,.6),inset0020pxrgba(255,255,255,1); 
transform:rotateZ(360deg);/*图像旋转360度*/
-webkit-transform:rotateZ(360deg); 
-moz-transform:rotateZ(360deg); 
}

头像效果九

#ds-reset.ds-avatarimg:hover{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:0s; 
-moz-animation-duration:0s; 
-ms-animation-duration:0s; 
-o-animation-duration:0s; 
animation-duration:0s; 
-webkit-animation-duration:1s; 
-moz-animation-duration:1s; 
-ms-animation-duration:1s; 
-o-animation-duration:1s; 
animation-duration:1s; 
-webkit-transform-style:preserve-3d; 
-moz-transform-style:preserve-3d; 
-o-transform-style:preserve-3d; 
transform-style:preserve-3d; 
-webkit-backface-visibility:visible!important; 
-webkit-animation-name:flip; 
-moz-backface-visibility:visible!important; 
-moz-animation-name:flip; 
-o-backface-visibility:visible!important; 
-o-animation-name:flip; 
backface-visibility:visible!important; 
animation-name:flip; 
} 
@-webkit-keyframesflip{ 
0%{-webkit-transform:perspective(400px)rotateY(0);-webkit-animation-timing-function:ease-out;} 
40%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(170deg);-webkit-animation-timing-function:ease-out;} 
50%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-webkit-animation-timing-function:ease-in;} 
80%{-webkit-transform:perspective(400px)rotateY(360deg)scale(.95);-webkit-animation-timing-function:ease-in;} 
100%{-webkit-transform:perspective(400px)scale(1);-webkit-animation-timing-function:ease-in;} 
} 

@-moz-keyframesflip{ 
0%{-moz-transform:perspective(400px)rotateY(0);-moz-animation-timing-function:ease-out;} 
40%{-moz-transform:perspective(400px)translateZ(150px)rotateY(170deg);-moz-animation-timing-function:ease-out;} 
50%{-moz-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-moz-animation-timing-function:ease-in;} 
80%{-moz-transform:perspective(400px)rotateY(360deg)scale(.95);-moz-animation-timing-function:ease-in;} 
100%{-moz-transform:perspective(400px)scale(1);-moz-animation-timing-function:ease-in;} 
} 
@-o-keyframesflip{ 
0%{-o-transform:perspective(400px)rotateY(0);-o-animation-timing-function:ease-out;} 
40%{-o-transform:perspective(400px)translateZ(150px)rotateY(170deg);-o-animation-timing-function:ease-out;} 
50%{-o-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-o-animation-timing-function:ease-in;} 
80%{-o-transform:perspective(400px)rotateY(360deg)scale(.95);-o-animation-timing-function:ease-in;} 
100%{-o-transform:perspective(400px)scale(1);-o-animation-timing-function:ease-in;} 
} 
@keyframesflip{ 
0%{transform:perspective(400px)rotateY(0);animation-timing-function:ease-out;} 
40%{transform:perspective(400px)translateZ(150px)rotateY(170deg);animation-timing-function:ease-out;} 
50%{transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);animation-timing-function:ease-in;} 
80%{transform:perspective(400px)rotateY(360deg)scale(.95);animation-timing-function:ease-in;} 
100%{transform:perspective(400px)scale(1);animation-timing-function:ease-in;} 
}

头像效果十

/*Head Start*/
    #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
    border: 0px;
    color: #6D6D6B;
    text-shadow: none;
    background: #F3F3F3;
}
#ds-thread #ds-reset .ds-highlight {
    font-family: Microsoft YaHei, "Helvetica Neue", Helvetica, Arial, Sans-serif;
    ;font-size: 100%;
    color: #6D6D6B !important;
}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {
    color: #696a52;
    background: #F2F2F2;
}
#ds-thread #ds-reset a.ds-highlight:hover {
    color: #696a52 !important;
}
#ds-thread {
    padding-left: 15px;
}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {
    overflow: visible;
}
#ds-thread #ds-reset .ds-post-self {
    padding: 10px 0 10px 10px;
}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {
    border: 0 !important;
}
#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {
    top: 15px;
    left: -20px;
    padding: 5px;
    width: 36px;
    height: 36px;
    box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;
    border-radius: 46px;
    background: #FAFAFA;
}
#ds-thread .ds-avatar a {
    display: inline-block;
    padding: 1px;
    width: 32px;
    height: 32px;
    border: 1px solid #b9baa6;
    border-radius: 50%;
    background-color: #fff !important;
}
#ds-thread .ds-avatar a:hover {
    }
#ds-thread .ds-avatar > img {
    margin: 2px 0 0 2px;
}
#ds-thread #ds-reset .ds-replybox {
    box-shadow: none;
}
#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {
    left: 0;
    top: 0;
    padding: 0;
    width: 32px !important;
    height: 32px !important;
    background: none;
    box-shadow: none;
}
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
}
#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img {
    padding: 0;
    width: 32px !important;
    height: 32px !important;
    border-radius: 5px;
}
#ds-reset .ds-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    -webkit-transition: .8s all ease-in-out;
    -moz-transition: .4s all ease-in-out;
    -o-transition: .4s all ease-in-out;
    -ms-transition: .4s all ease-in-out;
    transition: .4s all ease-in-out;
}
.ds-post-self:hover .ds-avatar img {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
#ds-thread #ds-reset .ds-comment-body {
    -webkit-transition-delay: initial;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: initial;
    background: #F7F7F7;
    padding: 15px 15px 15px 47px;
    border-radius: 5px;
    box-shadow: #B8B9B9 0 1px 3px;
    border: white 1px solid;
}
#ds-thread #ds-reset ul.ds-children .ds-comment-body {
    padding-left: 15px;
}
#ds-thread #ds-reset .ds-comment-body p {
    color: #787968;
}
#ds-thread #ds-reset .ds-comments {
    border-bottom: 0px;
}
#ds-thread #ds-reset .ds-powered-by {
    display: none;
}
#ds-thread #ds-reset .ds-comments a.ds-user-name {
    font-weight: normal;
    color: #3D3D3D !important;
}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {
    color: #D32 !important;
}
#ds-thread #ds-reset #ds-bubble {
    display: none !important;
}
#ds-thread #ds-reset #ds-hot-posts {
    border: 0;
}
#ds-reset #ds-hot-posts .ds-gradient-bg {
    background: none;
}
#ds-thread #ds-reset .ds-comment-body:hover {
    background-color: #F1F1F1;
    -webkit-transition-delay: initial;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: initial;
}
/*Head End*/

头像效果十一

/*头像样式*/
#ds-reset .ds-avatar {
    background:none !important;
    box-shadow:none !important;
}
#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img {
    width:50px !important;
    height: 50px !important;
    -webkit-transition: .9s;
    -moz-transition: .9s;
    -o-transition: .9s;
    -ms-transition: .9s;
    padding: 2px;
    border: 1px solid #ddd;
    background: #fff;
}
/*鼠标悬停旋转头像*/
.ds-post:hover .ds-avatar img {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    border-radius:30px !important;
}
#ds-reset .ds-avatar img:hover {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    border-radius:30px !important;
}

---

特别感谢：@V说 @wsgzao