订阅
使用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);}
保存，刷新一下，效果就出来了。
以上内容由兔子博客整理，欢迎转载。
原文链接：http://www.lyz.me/wordpress-avatar.html
在线留言
联系QQ
常见问题