本文最后更新于2020.04.21-19:43
,某些文章具有时效性,若有错误或已失效,请在下方评论留言或联系博主。
平时大家在浏览一些博客时,应该也发现博客评论栏里的用户头像,当鼠标移上去的时候还能有旋转的动画效果。
其实,要实现此效果一点也不难,是纯CSS样式即可实现,在这里9i资源网就分享给大家。
复制下面的代码粘贴到主题的自定义CSS样式就可以了你也可以放在主题的style.css
文件中,有些主题貌似是main.css
这个css文件,视主题而定。
在此说明下,(720deg)
是转两圈,如果你只想转一圈是话把720
改成360
,就可以了。
.avatar{ -webkit-transition:.4s; -webkit-transition:-webkit-transform.4sease-out; transition:transform.4sease-out; -moz-transition:-moz-transform.4sease-out; } .avatar:hover{ transform:rotateZ(720deg); -webkit-transform:rotateZ(720deg); -moz-transform:rotateZ(720deg); }
编辑保存好后,回到首页ctrl+F5刷新网页,效果就出来了。
放上本站效果图:
评论前必须登录!
立即登录 注册