WordPress实现评论头像旋转特效代码
资源外星人导读:本站为大家带来WordPress实现评论头像旋转特效代码文章,更多建站技术,请继续关注资源外星人!
资源外星人总是喜欢到处逛别人的博客,看到别人有趣的项目总要去研究:度娘摸一摸,F12元素审查扒一扒……想法设法要去提高用户体验,增加网站建设用户粘稠度。今天要分享的是:鼠标轻轻划过,WordPress评论图像旋转起来,是不是特别酷~
其实实现起来非常简单,CSS代码就能轻松搞定~
任选下面的一种方式来添加CSS代码:
WordPress-外观-自定义-额外CSS WordPress-主题选项-定制风格-自定义样式 WordPress-外观-编辑-style.css
和资源外星人同样使用Begin主题的小伙伴也想实现同资源外星人博客评论图像旋转特效可以直接复制下面的代码:
/*为WordPress增加头像旋转特效*/
.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代码即可。其他WordPress主题请大家自己研究哦。如遇到任何问题,欢迎在下方留言。
以上就是资源外星人整理的WordPress实现评论头像旋转特效代码全部内容,希望对大家有所帮助!