自定义CSS更改多说评论头像效果

  之前就在其他博主的博客上看到了这种效果，多说评论的头像十分动感。

  但是一直没有去实现这个效果，今天再次触动了我，于是探索了一下，在 仪表盘-多说评论-基本设置-自定义CSS 可以写入自己的CSS样式。

  我选择了下面的样式(hover时头像左右晃一下)，呵呵，喜欢。

  

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img: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-keyframes swing {   
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }   
    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-keyframes swing {   
    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-keyframes swing {   
    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); }   
}   
  
@keyframes swing {   
    20% { transform: rotate(15deg); }      
    40% { transform: rotate(-10deg); }   
    60% { transform: rotate(5deg); }       
    80% { transform: rotate(-5deg); }      
    100% { transform: rotate(0deg); }   
}   
  
#ds-reset .ds-avatar img:hover{   
    -webkit-transform-origin: top center;   
    -moz-transform-origin: top center;   
    -o-transform-origin: top center;   
    transform-origin: top center;   
    -webkit-animation-name: swing;   
    -moz-animation-name: swing;   
    -o-animation-name: swing;   
    animation-name: swing;   
}   

  Refer：http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html