设置WordPress的评论头像成圆形并旋转

使用wordpress博客后经常需要对主题进行各种修改来达到想要的效果,下面分享个使用CSS把博客评论栏里的头像改为圆形并且产生圆转动画。

找到自己主题的Style.css,在最下面添加如下代码即可。(IE浏览器暂不支持旋转)

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

保存,刷新一下,效果就出来了。


标签:  |  |  |  |  | 
将此文分享到:


转载请注明来自风腾网-wordpress企业主题,本文地址:http://fengten.com/2630.html
除非注明,风腾网-wordpress企业主题文章均为原创,转载请注明出处和链接!
友荐云推荐

相关文章

发表评论:

*

*

顶部 友荐云推荐