只要是class命名规范的主题都可以用下面的代码，若发现无效请修改相关class的名称。
在style.css中以下代码

样式一：

.comment-author 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 rollIn {     
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }     
}     
    
@-moz-keyframes rollIn {     
    0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }     
}     
    
@-o-keyframes rollIn {     
    0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }     
}     
    
@keyframes rollIn {     
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }     
}     
    
.comment-author img{     
    -webkit-animation-name: rollIn;     
    -moz-animation-name: rollIn;     
    -o-animation-name: rollIn;     
    animation-name: rollIn;     
}     
    
    
@-webkit-keyframes rollOut {     
    0% {     
        opacity: 1;     
        -webkit-transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        -webkit-transform: translateX(100%) rotate(120deg);     
    }     
}     
    
@-moz-keyframes rollOut {     
    0% {     
        opacity: 1;     
        -moz-transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        -moz-transform: translateX(100%) rotate(120deg);     
    }     
}     
    
@-o-keyframes rollOut {     
    0% {     
        opacity: 1;     
        -o-transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        -o-transform: translateX(100%) rotate(120deg);     
    }     
}     
    
@keyframes rollOut {     
    0% {     
        opacity: 1;     
        transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        transform: translateX(100%) rotate(120deg);     
    }     
}     
    
.comment-author img:hover{     
    -webkit-animation-name: rollOut;     
    -moz-animation-name: rollOut;     
    -o-animation-name: rollOut;     
    animation-name: rollOut;     
}

样式二：

.comment-author 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;     
}      
.comment-author 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);

来自让评论者的头像动起来：无压力小白级教程

标签：CSS