最新消息:

WordPress 多说评论插件设置圆形旋转头像

建站 BetaStar 1473浏览

你好,今天是2016年10月13日,星期四,农历九月十三,非常感谢你的来访。现在分享的是:WordPress 多说评论插件设置圆形旋转头像。

自从发布了 WordPress 为评论头像添加圆角鼠标触碰后旋转效果 之后,总是有人询问多说评论的可旋转圆形头像是如何设置的,其实实现方法很简单,在多说后台的“个性化设置”添加下面的自定义 CSS 即可:

#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);
}

最终效果为:头像变为圆形,鼠标悬停上方时会旋转一圈。

好了,WordPress 多说评论插件设置圆形旋转头像 就分享到这里,再次感谢你的来访。如果你很喜欢本站,请不要忘记收藏本站,以便下次继续访问;也可以 关注站长微博 随时获取最新动态。你的支持就是我最大的动力!

转载请注明:爱维科斯 » WordPress 多说评论插件设置圆形旋转头像

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者