本文最后更新于 804 天前,文中的信息可能已经有所变化。如有误,请留言反馈。
这是一个小特效,让评论者的头像动起来,为网站增加一些“生机”。
实现的方法有两种:
第一种:
/*头像旋转特效*/ .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文件当中,保存强制刷新即可。
两种方法在特效上有些许差异,可以两种方法分别试下,选择合适自己的;也可自己修改部分参数,达到最佳效果。
在不同的主题上可能会失效,可以多尝试下。