May总是喜欢到处逛别人的博客,看到别人有趣的项目总要去研究:度娘摸一摸,F12元素审查扒一扒……想法设法要去提高用户体验,增加网站建设用户粘稠度。今天要分享的是:鼠标轻轻划过,WordPress评论图像旋转起来,是不是特别酷~文章源自MAY的SEO博客-https://may90.com/building/comments-images.html
其实实现起来非常简单,CSS代码就能轻松搞定~文章源自MAY的SEO博客-https://may90.com/building/comments-images.html
任选下面的一种方式来添加CSS代码:
- WordPress-外观-自定义-额外CSS
- WordPress-主题选项-定制风格-自定义样式
- WordPress-外观-编辑-style.css
和May同样使用Begin主题的小伙伴也想实现同May博客评论图像旋转特效可以直接复制下面的代码:
/*为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主题请大家自己研究哦。如遇到任何问题,欢迎在下方留言。
我的微信
扫一扫微信,添加好友
我的微信公众号
关注公众号,了解最新动态
1F
如果我只想让自己名片上的头像旋转 该怎么做
B1
@ aming 同样的道理哦,只需要把CSS类选择器名换一下即可。