简单代码让你的wordpress头像转起来

这个主题一直感觉不错,之前因为升级wordpress导致各种报错就没有管它,最近开始折腾起来,错误相继修复,但是总感觉缺少点什么,今天特意为此把头像给增加了个动画,感觉挺不错的。。

代码很简单,一点css而已,但是不支持低版本的IE!

附上代码,需要的客官自己改改吧,直接将代码拷贝至主题的CSS里面即可。

/* ----------------------------------------------------------------------
avatar
---------------------------------------------------------------------- */
/*设置圆形*/
.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);}
  1. 旅行者 2013.09.27 7:12pm

    这个功能得好好利用一下

    • Jalena 2013.09.29 10:55am

      呵呵,很简单的功能!

  2. 资源岛 2013.09.27 1:47pm

    不错的功能…!

    • Jalena 2013.09.27 5:21pm

      可惜不支持低版本的浏览器!!

HTML tag cannot be used in this comment.