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

2017年8月27日01:48:12 66 20,734
摘要

估计现在大家在浏览一些博客时，会发现博客评论栏里的头像是圆形并且鼠标移上去还能有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.     float: left;
  5.     width: 64px;
  6.     height: 64px;
  7.     margin: 6px 10px 0 0;
  8.     padding: 2px;
  9.     border: 1px 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;padding: 2px;border: 1px 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刷新网页，效果应该就有了。

 

 

若文章图片、下载链接等信息出错，请在评论区留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！

发表评论

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

目前评论：66   其中：访客  0   博主  0

    • 微果派 微果派 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
      回复 2021年11月25日 20:46  61楼

      萨达萨达是阿达

      • 生产队的刘同学 生产队的刘同学 1 来自天朝的朋友 谷歌浏览器 Windows 10 河北省保定市 电信
        回复 2023年2月19日 20:04  62楼

        看，nb！