知更鸟Begin主题给评论者头像添加旋转变圆特效 – WordPress美化

王小优
王小优
王小优
231
文章
0
评论
2015年6月25日
评论
6,646 2552字阅读8分30秒
摘要

估计现在大家在浏览一些博客时,会发现博客评论栏里的头像是圆形并且鼠标移上去还能有360°旋转动画效果。主题原来的特效在鼠标经过的时候并不会变成圆的,也没有如图显示的绿色阴影效果。

在原来的基础如你所见,是在style.css文件添加了几行代码。

如果你使用的不是知更鸟的Begin主题,那么我把原来的代码都复制出来了,你们自己找到自己主题里的的样式名添加进去就是了。

知更鸟Begin主题给评论者头像添加旋转变圆特效 – WordPress美化

代码部署

方法一:(Begin主题5.2版)

后台→外观→编辑→样式表(style.css)找到下面的代码:

  1. .vcard .avatar {
  2.    float: left;
  3.    width: 64px;
  4.    height: 64px;
  5.    margin: 7px 10px 0 0;
  6.    padding: 3px;
  7.    border-radius: 5px;
  8.    border: 1px solid #ddd;
  9.    transition: all 0.8s ease 0s;
  10. }

知更鸟Begin主题用户,直接用下面的代码覆盖上面的代码:

此处为隐藏的内容
发表评论并刷新,方可查看

方法二:(Begin主题LTS版)

直接复制放到:后台的主题选项→定制风格→自定义样式

此处为隐藏的内容
发表评论并刷新,方可查看

方法三:(转自路人博客)

评论栏里的头像使用的是默认的avatar样式,找到主题目录下style.css,在最下面添加如下CSS样式代码即可。(IE浏览器暂不支持旋转,Chrome支持)

首先设置头像是圆形

此处为隐藏的内容
发表评论并刷新,方可查看

增加旋转动画效果

此处为隐藏的内容
发表评论并刷新,方可查看

编辑保存好后,Ctrl+F5刷新网页,效果应该就有了。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
为WordPress最新文章增加NEW最新提示标志 WordPress美化

为WordPress最新文章增加NEW最新提示标志

纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示,让你的博客更加饱满、人性化,一起跟王小优折腾起来。 看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片,感觉比较人性化,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: