前言

多说是一款社会化评论系统，它改变了网站与用户之间，用户与用户之间的互动方式。当然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;

}