WordPress评论头像圆角鼠标触碰旋转
02月26日, 2014 wordpress wordpress技巧 半夏凉歌
02月26日, 2014
之前看到很多人使用多说评论,在后台使用CSS将评论的头像改为圆角,鼠标触摸后头像会有转动的效果,觉得很不错,但是我不喜欢多说要同步注册信息到多说的服务器,而且提醒邮件也被接管为多说发送,感觉不爽,所以一直不用。 找了一下,发现其实在WordPress的默认评论中也可以使用;
方法很简单,在你当前使用的主题里找到style.css,将下面的代码粘贴到style.css文件里面,然后保存即可。
(有些主题使用代码后可能无效,需要您自己找到头像的css文件,可以对比以下代码自己更改)
/* 圆角头像 */ .avatar{float:left;margin-right:8px;padding:1px;border:1px solid #cfd9e1;width:35px;height:35px;/*设置图像的长和宽*/ 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; } .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);}