之前看到很多人使用多说评论，在后台使用 CSS 将评论的头像改为圆角，鼠标触摸后头像会有转动的效果，觉得很不错，但是我不喜欢多说要同步注册信息到多说的服务器，而且提醒邮件也被接管为多说发送，感觉不爽，所以一直不用。 找了一下，发现其实在 WordPress 的默认评论中也可以使用，方法很简单，在你当前使用的主题里找到 style.css，将下面的代码粘贴到 style.css 的最后，然后保存即可；使用 DUX 主题的把代码粘贴到 CSS 文件夹中的 main.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);} 好了，WordPress 为评论头像添加圆角鼠标触碰后旋转效果 就分享到这里，非常感谢你的来访。如果你很喜欢本站，请不要忘记收藏本站，以便下次继续访问；也可以 关注站长微博 随时获取最新动态。你的支持就是我最大的动力！
转载请注明：爱维科斯 » WordPress 为评论头像添加圆角鼠标触碰后旋转效果
赏 
支付宝打赏 
微信打赏
支付宝打赏 微信打赏 如果文章对你有帮助，欢迎点击上方按钮打赏作者