如何使TYPECHO博客评论头像旋转

本博客现在用的是Mirages主题,需要在theme.min.css文件中找到以下代码:

.avatar{float:left;margin:0 .625rem 0 0;border-radius:3.125rem;width:3.125rem;height:3.125rem;background-color:#f0f0f0}

修改为:

.avatar{float:left;margin:0 .625rem 0 0;border-radius:3.125rem;width:3.125rem;height:3.125rem;background-color:#f0f0f0;transition: all 0.5s}.avatar:hover{transform:rotate(360deg)}

即可大功告成!
具体演示效果,可参照本博客评论头像。

【transition: all 0.5s】是表示旋转在0.5秒内完成,可自行修改速度
【transform: rotate(360deg)】表示图片旋转360度,可自行修改



访问:56次

已有 29 条评论

  1. 我来试试看 @(滑稽)

  2. 首页绿标小锁怎么变灰了 @(喷)

    1. 不知道什么情况,没啥影响,无视即可。。

  3. 被安利了

  4. 欢

    不会

  5. 我来转一转@(勉强)

  6. 任务易 任务易

    同样来试试

  7. 苏筱熙 苏筱熙

    怎么调试获取头像呀,我的都是裂掉的...

    1. 地址呢?

      1. 因为裂掉了 所以我就给取消了,还有你这个邮箱通知的模板可以给我发一下吗?

        1. https://www.xiaobaichi.com/90.html

          1. 大佬 我评论通知插件不晓得怎么无法使用了 按照设置没问题的 但测试邮件一直不能发。

  8. 好文,拜读,以后常看学习。

  9. 我也要试一试

  10. 怎么感觉你主题换的很频繁呢

    1. 不会写文章就换主题玩呗@(笑眼)

      1. 你这里头象不能旋转吧?

  11. 您好,您的网站做的很不错,很漂亮,我已经收藏了,方便我随时访问.

  12. 没有转啊。。@(笑眼)

  13. 受教了!好文

  14. 您好,您的网站做的很不错,很漂亮

  15. 好文 学习 了

  16. 测试回复邮件

  17. @(呵呵)测试

  18. 44 44

    @(呵呵)

  19. 试试?还不错呢@(滑稽)


添加新评论