首页 网站建设 Wordpress 浏览内容
WordPress修改评论头像为圆形并旋转几种方法
使用WordPress博客后我们经常需要对主题进行各种修改来达到自己想要的效果，下面兔子就跟大家分享下使用CSS把博客评论栏里的头像改为圆形并且产生圆转动画。
评论头像旋转
一、使用非无缝衔接wordpress评论插件的小伙们在评论插件的自定义CSS栏目中填写下面的代码即可。如果想改名具体的一些样式。可以自己修改css.
A.圆角（或者圆形）+阴影
在这里我直接使用的是CSS3代码
| 1 2 3 4 5 6 7 8 | #ds-reset .ds-avatar img{ width:54px;height:54px; /*设置图像的长和宽*/ border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:27px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; } |
B.鼠标悬浮时:图像进行360度旋转
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #ds-reset .ds-avatar img{ width:54px;height:54px; /*设置图像的长和宽，这里要根据自己的评论框情况更改*/ border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:27px; 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; } #ds-reset .ds-avatar img: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); } |
注意设置背景颜色 #ds-thread {background: #ffffff;}不然很难看。具体自己修改吧。下面分享一个更加漂亮的达人样式代码。
美化留言评论样式
添加质感：这里主要使用CSS3的圆角（border-radius）、阴影（box-shadow）来实现质感，具体使用方法网上一大堆了，我就不啰嗦啦^^ 配色方面要尽量配合你的网站风格哦。
交互设计：达人使用的交互只是一个简单的CSS3旋转动画（transform:rotate），当然你可以使用更多的动画效果来，不过我不建议搞得过于花哨
以下代码是根据设计达人网站的风格而配色的，所以使用的时候记得改下配色哦。特别是记得改「#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}」。（仅适用于非无缝衔接...）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2} #ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#848568 !important;} #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba} #ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;} #ds-thread {padding-left:30px;} #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible} #ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;} #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;} #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;} #ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;} #ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important} #ds-thread .ds-avatar a:hover {border-color:#de5a4e} #ds-thread .ds-avatar > img {margin:2px 0 0 2px} #ds-thread #ds-reset .ds-replybox {box-shadow:none;} #ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar, #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; } #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;} #ds-reset .ds-replybox a.ds-avatar, #ds-reset .ds-replybox .ds-avatar img { padding:0;width:50px !important;height:50px !important; border-radius:5px; } #ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22); -webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out; } .ds-post-self:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);} #ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;} #ds-thread #ds-reset .ds-comment-body p{color:#787968} #ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;} #ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;} #ds-thread #ds-reset #ds-hot-posts {border:0} #ds-reset #ds-hot-posts .ds-gradient-bg {background:none;} #ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;} #ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;} #ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;} #ds-reset #ds-bubble .ds-user-name{padding-left:13px;} #ds-reset .ds-comment-body #ds-ctx {border-left:1px solid #b9baa6;background-color:#e8e8dc !important} #ds-reset #ds-ctx {margin-right:-15px} #ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;} #ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;box-shadow:none;} #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;} #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968} #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;font-weight:bold} |
用户气泡提示框代码：倒数8-11行。（隐藏用户气泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」，这是隐藏鼠标移至用户名称时弹出来的气泡提示框，个人觉得没什么用啊，所以直接隐藏了。）
评论盖楼样式代码：倒数1-7行。（不用盖楼的评论方式用户可以直接删除这几行，精简一下代码。）
添加方法：打开「Wordpress后台」 > 「多说评论」 > 「个性化设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」
二、找到自己主题的Style.css，在最下面添加如下代码即可。(IE浏览器暂不支持旋转，仅支持无缝衔接wordpress的评论插件以及没有使用评论插件的小伙伴)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .avatar{ /*设置圆形*/ border-radius:60px; -webkit-border-radius:60px; -moz-border-radius:60px; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; transition: transform 0.5s ease-out; -webkit-transition: 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out;} .avatar:hover{ /*旋转动画*/ 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); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg);} 建议直接修改CSS文件不要直接在后台修改，完成后请刷新CDN缓存以及浏览器缓存！ 柒月网络整理发布。 |
渝ICP备14003717号-6
