当前位置：K88软件开发 → 文章中心 → 编程全书 → 编程全书02 → 文章内容

WordPress用户头像旋转360度特效

减小字体 增大字体 作者：佚名  来源：网上搜集  发布时间：2019-1-4 9:16:53

-->

WordPress主题中经常会有用户头像鼠标指向后又旋转360特效，这个特效可以使用JQuery实现，也可以直接用CSS实现。CSS实现旋转相对简单一些，我在WordPress主题Log Style中就是用来这个特效。

找到头像的class

WordPress头像使用的是avatar，img中会有avatar，我们对avatar做控制即可。

旋转方法

1
2
3
4
5
6
7
8
9
10
11
.avatar{
    -webkit-transition: 0.6s;      
    -webkit-transition: -webkit-transform 0.6s ease-out;  
    transition: transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;  
}
.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);  
    -moz-transform: rotateZ(360deg);  
}

WordPress用户头像旋转360度特效



[] [返回上一页] [打 印]

文章评论评论内容只代表网友观点，与本站立场无关！