圓角頭像加360旋轉效果

#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);   
}

由BattleHeart最後編輯於：4年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。