jiangwordpresspingluntouxiangxiugaichengyuanjiaoshishubiaochupenghouxuanzhuanxiaoguo

Jul312013

将wordpress评论头像修改成圆角使鼠标触碰后旋转效果

作者：m88 发布：2013-07-31 12:43 本文共1297个字节分类：技术资料, 资源共享阅读：57 次 10条评论

写在前面
如果你的wordpress使用的是多说评论插件的话，修改方法将是另外一种，如果你想要修改多说的话，那就去找度娘吧。
这里讲的是将wordpress自带评论区的头像设置。
其实这个修改方法也是和多说的修改方法大同小异，就是使用CSS将评论的头像改为圆角，鼠标触摸后头像就会实现转动的效果，
本人一直都认为wordpress应该尽量少用插件，因为各种原因，用wordpress的基本上都懂的，这里就不多废话了，
用多说插件的都知道，多说要同步注册信息到多说的服务器，而且提醒邮件也被接管为多说发送，个人感觉这个不爽，所以一直没有使用多说也是原因之一。
下面就直接说说修改wordpress默认评论区的头像修改，
方法很简单，找到你当前使用的主题的文件夹，进入后，找到style.css，将下面的代码复制后，粘贴到style.css文件的最下面（PS：这里是大多数主题的修改方法，如果你使用的主题的style.css比较奇葩，那就另当别论了，具体的还是要自己动手，放能丰衣足食，哈），然后保存即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.avatar{float:left;margin-right:8px;padding:1px;border:1px solid https://www.zhbk.name/467-3/cfd9e1;width:40px;height:40px; /*设置图像的长和宽*/
border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 20px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:20px;
box-shadow: inset 0 -1px 0 https://www.zhbk.name/467-3/3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 https://www.zhbk.name/467-3/3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/
-moz-transition: -moz-transform 0.4s ease-out;
}
.avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/
box-shadow: 0 0 10px https://www.zhbk.name/467-3/fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px https://www.zhbk.name/467-3/fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg); }

上面是我使用的设置，修改的时候，可以根据上面的注释进行修改，比如头像的大小，旋转的角度，时间等等。效果见本博客评论区。

声明: 本文采用 BY-NC-SA 协议进行授权 | m88博客
转载请注明转自《将wordpress评论头像修改成圆角使鼠标触碰后旋转效果》

本文固定链接: https://www.zhbk.name/jiangwordpresspingluntouxiangxiugaichengyuanjiaoshishubiaochupenghouxuanzhuanxiaoguo/ | m88博客

该日志由 m88 于2013年07月31日发表在技术资料, 资源共享分类下，你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 将wordpress评论头像修改成圆角使鼠标触碰后旋转效果 | m88博客
关键字: DIY WordPress, wordpress评论头像, wordpress默认评论区头像修改, 多说, 多说插件, 头像旋转效果, 旋转效果, 评论头像旋转效果

【上一篇】D And C的故事
【下一篇】执子之手，与子偕老

您可能还会对这些文章感兴趣！

将wordpress评论头像修改成圆角使鼠标触碰后旋转效果：目前本页面共有 10 条留言其中：访客:5 条, 博主:5 条, 目前共有 10 条评论，双方以 5：5 暂时持平

此人强势抢占了地板
深蓝 :

刚用到多说上面，我百度来的，哈哈。

2013-08-03 23:16 江苏省镇江市电信[回复]
- m88 :
  
  额，我只能说萝卜白菜，各有所爱吧，关于多说的修改方法在度娘一找，多的是。
  
  2013-08-03 23:55 [回复]
此人强势抢占了板凳
华鑫 :

css3 IE不支持，这个插件也不能支持，用chrome firfox的也就问博客的这些人

2013-08-02 09:38 湖南省联通[回复]
- m88 :
  
  纠正一个问题，这个并非插件哦，兄弟。
  
  2013-08-02 12:26 [回复]
此人强势抢占了沙发
一季花落 :

主要是不懂代码要不我也懒得用多说邮箱提醒折腾了大半天没折腾出来问了度娘还是折腾不出来

2013-08-01 23:23 福建省电信[回复]
- m88 :
  
  你是想改多说还是改wordpress默认的呢？
  
  2013-08-01 23:25 [回复]
  - 一季花落 :
    
    改wordpress默认的不懂的折腾看了度娘上的教程了看不懂
    
    2013-08-02 01:57 福建省电信[回复]
    - m88 :
      
      在style.css文件里找到avatar，将上面的css放在下一段即可。
      
      2013-08-02 12:22 [回复]
  - 一季花落 :
    
    我记得我头像换了为什么你这里没更新过来
    
    2013-08-02 01:58 福建省电信[回复]
    - m88 :
      
      头像是改了，我在后台看到了，只是前台调用的是avatar文件夹里之前缓存到的头像。
      
      2013-08-02 12:23 [回复]