乐于分享
好资源不私藏

wordpress美化-为网站用户头像添加720°旋转的方法

本文最后更新于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刷新网页,效果就出来了。

 

放上本站效果图

未经允许不得转载:9i资源网 » wordpress美化-为网站用户头像添加720°旋转的方法

评论 抢沙发

评论前必须登录!

立即登录   注册

×
订阅图标按钮