7B2主题 头像旋转的效果

纸工场 Paper.TV 1人参与 0 次点击

演示网站: 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;
}

    1 讨论 | 直到 2019-02-21 2:52:58
  • 纸工场 Paper.TV
    1

    后来感觉占地方就删除了