WordPress网站主题中鼠标移至会员头像旋转效果的实现方法

WordPress鼠标移至会员头像旋转效果的实现方法，其实很简单，把下面的代码添加到你正在使用的主题CSS样式中，或者在后台主题设置里面，添加到头部CSS自定义代码的区域。代码如下：

/鼠标移动至头像旋转/
.avatar{
-webkit-transition:0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
-moz-transition:-moz-transform 0.4s ease-out;
}
.avatar:hover{
transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
}

刷新页面，试试看，你的会员头像是不是旋转起来了，很酷哦！

下面是另一个代码，也可以实现这样的旋转效果：

/头像旋转的效果/
.avatar{padding:1px;border:1px solid #cfd9e1;width:64px;height:64px; /设置图像的宽和高，我设置的宽高都是64px,当然你可以根据你的主题自行修改/
border-radius: 100% !important;/设置图像圆角效果,这里我为了和主题的代码冲突，更改了优先级/
-webkit-border-radius: 100% !important;/圆角效果：兼容webkit浏览器/
-moz-border-radius:100% !important;/圆角效果：兼容火狐浏览器/
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秒，这个时间也可以根据需要自行修改(变化动作即为下面的图像旋转720度）/
-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(720deg);/图像旋转720度，这个旋转角度你也可以自己设置。/
-webkit-transform: rotateZ(720deg);
-moz-transform: rotateZ(720deg);
}

刷新页面，试试看，你的会员头像是不是旋转起来了，很酷哦！