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

小白痴 2017-4-10 907 4/10

本博客现在用的是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度,可自行修改

- THE END -
最后修改:2017年4月10日

非特殊说明,本博所有文章均为博主原创。

共有 29 条评论

  1. 始于颜值忠于你

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

  2. 44

    @(呵呵)

  3. 笑因年少

    @(呵呵)测试

  4. Eleven

    测试回复邮件

  5. 剪板机

    好文 学习 了

  6. 压力机

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

  7. 剪板机

    受教了!好文

  8. 姜辰

    没有转啊。。@(笑眼)

    1. 小白痴博主

      @姜辰: 就不让你看!

  9. 压力机

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

  10. 弋牧

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

    1. 小白痴博主

      @弋牧: 不会写文章就换主题玩呗@(笑眼)

      1. 弋牧

        @小白痴: 你这里头象不能旋转吧?

        1. 小白痴博主

          @弋牧: 不能,我没改

  11. Queensland Assignment

    我也要试一试

  12. 替天行盗

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

  13. 苏筱熙

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

    1. 小白痴博主

      @苏筱熙: 地址呢?

      1. 苏筱熙

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

          1. 苏筱熙

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

  14. 任务易

    同样来试试

  15. 思绪的空中生活

    我来转一转@(勉强)

  16. 不会

  17. 企业管理培训

    被安利了

  18. gulangyu

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

    1. 小白痴博主

      @gulangyu: 不知道什么情况,没啥影响,无视即可。。

  19. gulangyu

    我来试试看 @(滑稽)