WordPress二次开发:网页模板中使用旋转圆形头像

2016-03-24 17:38 阅读 69 次 评论关闭

WordPress圆形头像

如上图wordpress侧边栏 “最新评论” 的用户头像是圆形的,这样子设计就显得与众不同。圆形头像,其实头像图片本身还是方形的,是用 CSS3 的 border-radius 属性做成圆形的。实现圆形头像很简单,只需要打开当前主题根目录的 style.css,在最后边添加下边的代码:

保存之后所有的头像就都是圆形的了。

WordPress头像旋转

当前你把鼠标放到wordpress圆形头像上的时候头像会旋转,非常帅,如果你也要旋转的效果,可以用下边的代码替换上边的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
    *WordPress 圆形头像
    *头像旋转
    *http://www.daxuewen8.com/
*/
img.avatar.photo {
    border-radius: 100%;
    -moz-border-radius: 100%;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
}
img.avatar.photo:hover {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
}

 

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:WordPress二次开发:网页模板中使用旋转圆形头像 | 猎微网

评论已关闭!