前言
多說是一款社會化評論系統(tǒng)，它改變了網(wǎng)站與用戶之間，用戶與用戶之間的互動方式。當然Disqus在大家心目中可能更加具有影響力，而多說“接地氣的本地化評論托管服務”則讓人眼前一亮。
在WordPress和GitHub+Hexo搭建的靜態(tài)Blog我們常常使用多說、暢言等評論系統(tǒng)，但是官方的配色和布局往往和我們的網(wǎng)站不太融合，所以我們要對其進行適當?shù)拿阑?br>
接下來我們就要談論我們的多說評論框上篇之自定義CSS頭像，話不多說，切入正題~
多說自定義CSS
以下是整理出來的十一種頭像特效，各種效果都以GIF動態(tài)圖呈現(xiàn)，可以很直觀的看到效果。畢竟是圖片，實際效果當然會更好的多。代碼在最下面
效果一
效果二
效果三
效果四
效果五
效果六
效果七
效果八
效果九
效果十
效果十一
附錄：CSS代碼
代碼在下面(請用非IE瀏覽器看)，設(shè)置步驟超級簡單，登錄多說后臺->設(shè)置->基本設(shè)置->自定義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;/*設(shè)置圖像的長和寬，這里要根據(jù)自己的評論框情況更改*/
border-radius:27px;/*設(shè)置圖像圓角效果,在這里我直接設(shè)置了超過width/2的像素，即為圓形了*/
-webkit-border-radius:27px;/*圓角效果：兼容webkit瀏覽器*/
-moz-border-radius:27px;
box-shadow:inset0-1px0#3333sf;/*設(shè)置圖像陰影效果*/
-webkit-box-shadow:inset0-1px0#3333sf;
-webkit-transition:0.4s;
-webkit-transition:-webkit-transform0.4sease-out;
transition:transform0.4sease-out;/*變化時間設(shè)置為0.4秒(變化動作即為下面的圖像旋轉(zhuǎn)360讀）*/
-moz-transition:-moz-transform0.4sease-out;
}
#ds-reset.ds-avatarimg:hover{/*設(shè)置鼠標懸浮在頭像時的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);/*圖像旋轉(zhuǎn)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;
}
/*鼠標懸停旋轉(zhuǎn)頭像*/
.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;
}
