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

2017年8月27日01:48:12 45 2,788
摘要

估计现在大家在浏览一些博客时,会发现博客评论栏里的头像是圆形并且鼠标移上去还能有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主题给评论者头像添加旋转变圆特效 —— WordPress美化

 

方法二:(Begin主题LTS版)

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

  1. /**评论头像旋转的效果**/
  2. .vcard .avatar {
  3.     box-shadow:0px 0px 1px;
  4.     floatleft;
  5.     width64px;
  6.     height64px;
  7.     margin6px 10px 0 0;
  8.     padding2px;
  9.     border1px solid #ddd;
  10.     transition: all 0.6s ease 0s;
  11.     -webkit-transition: all 0.6s ease 0s;
  12.     -moz-transition: all 0.6s ease 0s;
  13.     -o-transition: all 0.6s ease 0s;
  14.     -ms-transition: 0.6s;
  15. }
  16. .vcard:hover .avatar {
  17.     box-shadow:0px 0px 10px #0c0;
  18.     transform: rotate(720deg);
  19.     -webkit-transform: rotate(720deg);
  20.     -moz-transform: rotate(720deg);
  21.     -o-transform: rotate(720deg);
  22.     -ms-transform: rotate(720deg);
  23.     border-radius:40px!important;
  24.     filter:alpha(opacity=100)!important;
  25.     opacity:1!important;
  26. }
  27. .avatar{
  28.    -webkit-transition:0.2s;
  29.    -webkit-transition:-webkit-transform 0.2s ease-out;
  30.    transition:transform 0.2s ease-out;
  31.    -moz-transition:-moz-transform 0.2s ease-out;
  32. }
  33. .avatar:hover{
  34.    transform:rotateZ(360deg);
  35.    -webkit-transform:rotateZ(360deg);
  36.    -moz-transform:rotateZ(360deg);
  37. }

 

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

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

首先设置头像是圆形

  1. .avatar{
  2. /*设置圆形*/
  3. -webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding2px;border1px solid #ddd;background#fff}

 

增加旋转动画效果

  1. .avatar:hover{
  2. /*旋转动画*/
  3. transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);border-radius: 30px!important}

 

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

 

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的QQ
  • QQ扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin

发表评论

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

目前评论:45   其中:访客  43   博主  2

    • 青海分享 青海分享 2 来自天朝的朋友 QQ浏览器 Windows 10 陕西省西安市 电信

      66666666666666666666太好了