多说评论上篇之自定义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

最后编辑于：2017.12.05 04:54:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,036评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,046评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,411评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,622评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,661评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,521评论 1赞 304
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,288评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,200评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,644评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,837评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,953评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,673评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,281评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,889评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,011评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,119评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,901评论 2赞 355