- A+
所属分类:网站建设
估计现在大家在浏览一些博客时,会发现博客评论栏里的头像是圆形并且鼠标移上去还能有360°旋转动画效果。其实,要此效果一点也不难,是纯CSS样式即可实现。在这里分享给大家。
在我的评论栏中头像已有此效果,可以往下看一下。
评论栏里的头像使用的是默认的avatar样式,找到主题目录下Style.css,在最下面添加如下css样式代码即可。(IE浏览器暂不支持旋转,chrome支持)
首先设置头像是圆形
1 2 3 | .avatar{ /*设置圆形*/ -webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding: 2px;border: 1px solid #ddd;background: #fff} |
增加旋转动画效果
1 2 3 | .avatar:hover{ /*旋转动画*/ transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);border-radius: 30px!important} |
编辑保存好后,ctrl+F5刷新网页,效果应该就有了。
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-