WordPress评论头像并旋转特效教程

avatar 2019年1月10日16:45:02 评论 2,557

估计现在大家在浏览一些博客时,会发现博客评论栏里的头像是圆形并且鼠标移上去还能有360°旋转动画效果。其实,要此效果一点也不难,是纯CSS样式即可实现。在这里分享给大家。

在我的评论栏中头像已有此效果,可以往下看一下。

评论栏里的头像使用的是默认的avatar样式,找到主题目录下Style.css,在最下面添加如下css样式代码即可。(IE浏览器暂不支持旋转,chrome支持)
首先设置头像是圆形

.avatar{
/*设置圆形*/
-webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding: 2px;border: 1px solid #ddd;background: #fff}

增加旋转动画效果

.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刷新网页,效果应该就有了。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: