欢迎来到Will的博客

WordPress设置圆形旋转头像

Wordpress will 479℃ 0评论

前一段时间在其他博客上看到用户头像为圆形,且当鼠标移过去时,头像会旋转,很炫有没有,今天就学习一下怎么设置圆形旋转头像。

找到使用主题下的style.css文件,在最后添加如下样式即可。

 

.c-avatar .avatar{
  float:left;
  margin-right:10px;
  padding:4px;
  border:1px solid #eee;
  width:54px;height:54px; /*设置图像的长和宽*/
  border-radius: 36px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
  -webkit-border-radius: 36px;/*圆角效果:兼容webkit浏览器*/
  -moz-border-radius:36px;
  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;
}
.c-avatar .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(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg); }

效果如下:

1

转载请注明:Will的博客 » WordPress设置圆形旋转头像

喜欢 (0)or分享 (0)
  1. 某夫妇看球,妻惊讶道:“亲爱的,那个主裁长得和你很象耶! ”公细观之,洋洋道:“不错! ”
    一周后,公往现场观球返家,只见衣衫不整,鼻青脸肿。妻大惊,问其故,公愤然曰:“散场后跑得太慢! ”