CSS实现WordPress评论用户头像旋转特效

这是一个小特效,让评论者的头像动起来,为网站增加一些“生机”。

实现的方法有两种:

第一种:

/*头像旋转特效*/
.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 .avatar{border: 1px solid #ccc;}
.vcard .avatar {
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;
}
.vcard:hover .avatar {
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;
}

选一种加入主题的CSS文件当中,保存强制刷新即可。

两种方法在特效上有些许差异,可以两种方法分别试下,选择合适自己的;也可自己修改部分参数,达到最佳效果。

在不同的主题上可能会失效,可以多尝试下。

《CSS实现WordPress评论用户头像旋转特效》版权归逐凨所有
转载请保留原文链接:https://izhizu.com/wordpress/67.html
THE END
分享
二维码
< <上一篇
下一篇>>