演示网站: https://paper.tv/ (打个广告)
//代码 放在css 上
/**头像旋转的效果**/
.avatar{
-webkit-transition:0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
-moz-transition:-moz-transform 0.4s ease-out;
}
.avatar:hover{
transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
}
.comment-list .gravatar img {
box-shadow:0px 0px 0px;
float: left;
margin: 6px 0px 0 0;
padding: 2px;
border: 0px solid #fafafa;
transition: all 0.8s ease 0s;
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
-ms-transition: 0.8s;
}
.comment-list :hover .gravatar img {
box-shadow:0px 0px 10px #ccc;
transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
border-radius:40px!important;
filter:alpha(opacity=100)!important;
opacity:1!important;
}