WordPress 多說評論插件設置圓形旋轉頭像

最近總是有朋友詢問多說評論的可旋轉圓形頭像是如何設置的，其實也是很久前在網上找到方法，都已經不記得在哪看到的瞭。實現方法很簡單，在多說後臺的“個性化設置”添加下面的自定義CSS即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#ds-reset .ds-avatar img{   
    width:54px;height:54px; /*設置圖像的長和寬，這裡要根據自己的評論框情況更改*/  
    border-radius: 27px;/*設置圖像圓角效果,在這裡我直接設置瞭超過width/2的像素，即為圓形瞭*/  
    -webkit-border-radius: 27px;/*圓角效果：兼容webkit瀏覽器*/  
    -moz-border-radius:27px;   
    box-shadow: inset 0 -1px 0 #3333sf;/*設置圖像陰影效果*/  
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;   
    -webkit-transition: 0.4s;      
    -webkit-transition: -webkit-transform 0.4s ease-out;   
    transition: transform 0.4s ease-out;/*變化時間設置為0.4秒(變化動作即為下面的圖像旋轉360讀）*/  
    -moz-transition: -moz-transform 0.4s ease-out;   
}    
#ds-reset .ds-avatar img:hover{/*設置鼠標懸浮在頭像時的CSS樣式*/  
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    transform: rotateZ(360deg);/*圖像旋轉360度*/  
    -webkit-transform: rotateZ(360deg);   
    -moz-transform: rotateZ(360deg);   
}

#ds-reset .ds-avatar img{
width:54px;height:54px; /*設置圖像的長和寬，這裡要根據自己的評論框情況更改*/
border-radius: 27px;/*設置圖像圓角效果,在這裡我直接設置瞭超過width/2的像素，即為圓形瞭*/
-webkit-border-radius: 27px;/*圓角效果：兼容webkit瀏覽器*/
-moz-border-radius:27px;
box-shadow: inset 0 -1px 0 #3333sf;/*設置圖像陰影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;/*變化時間設置為0.4秒(變化動作即為下面的圖像旋轉360讀）*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover{/*設置鼠標懸浮在頭像時的CSS樣式*/
box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
transform: rotateZ(360deg);/*圖像旋轉360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}

最終效果為：頭像變圓形，鼠標懸停上方會旋轉一圈：