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

.
​​​​​​​​​​​​​

写在前面
如果你的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 #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 #3333sf;/*设置图像阴影效果*/  
-webkit-box-shadow: inset 0 -1px 0 #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 #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
-webkit-box-shadow: 0 0 10px #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); }

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

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

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

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

  1. 此人强势抢占了地板
    深蓝 China Internet Explorer Windows :

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

    2013-08-03 23:16 江苏省镇江市 电信[回复]
    • m88 China Google Chrome Windows :

      ❓ 额,我只能说萝卜白菜,各有所爱吧,关于多说的修改方法在度娘一找,多的是。

      2013-08-03 23:55 [回复]
  2. 此人强势抢占了板凳
    华鑫 China Google Chrome Windows :

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

    2013-08-02 09:38 湖南省 联通[回复]
    • m88 China Google Chrome Windows :

      纠正一个问题,这个并非插件哦,兄弟。

      2013-08-02 12:26 [回复]
  3. 此人强势抢占了沙发
    一季花落 China Google Chrome Windows :

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

    2013-08-01 23:23 福建省 电信[回复]
    • m88 China Google Chrome Windows :

      ❓ 你是想改多说还是改wordpress默认的呢?

      2013-08-01 23:25 [回复]
      • 改wordpress默认的不懂的折腾 看了度娘上的教程了 看不懂

        2013-08-02 01:57 福建省 电信[回复]
        • m88 China Google Chrome Windows :

          在style.css文件里找到avatar,将上面的css放在下一段即可。

          2013-08-02 12:22 [回复]
      • 我记得我头像换了 为什么你这里没更新过来

        2013-08-02 01:58 福建省 电信[回复]
        • m88 China Google Chrome Windows :

          头像是改了,我在后台看到了,只是前台调用的是avatar文件夹里之前缓存到的头像。

          2013-08-02 12:23 [回复]

发表评论

汗 色 悲 闭嘴 调皮 笑 惊 亲 雷 馋 晕 酷 奸 怒 狂 萌 吃 贪 囧 羞 哭 嘿

NOTICE1:亲,评论一下吧,又不会怀孕,欢迎吐槽!

NOTICE2:一切广告形式的昵称及评论一律删除,与本文无关的留言请到留言板,谢谢合作!

NOTICE3: 为防止垃圾评论,没有头像的会被“小墙”直接拖入待审,请申请Gravatar通用头像

NOTICE4: You must type some Chinese(like“你好”)in your comment to pass the spam-check, thanks!

快捷键:Ctrl+Enter
欢迎来自 miantiao.me 的朋友!
推荐您 点击这里 订阅我的博客
×