<font color=#27cf5e size=4>前言</font>


前段时间一直在学习研究多说评论框CSS,发现几乎每个人自定义的CSS都有那么一条命令,就是鼠标放在头像上头像会360度旋转,这真是个很好玩的地方。可是我没有使用多说评论系统,而且我试着直接搬代码过来,失败了。也不知道是不是我哪步搞错了。在我自己的一番瞎搞下!我居然弄成功了!原来让Typecho评论框的头像动起来是那么简单。

<font color=#27cf5e size=4>步骤</font>


  1. 【后台】——【当前主题下的style.css】——【找到以下代码】:

.avatar{display:block;float:left;width:40px;height:40px;margin:1.4rem 1rem 0 0;border-radius:50%}
  1. 【修改为一下代码:】

.avatar{display:block;float:left;width:40px;height:40px;margin:1.4rem 1rem 0 0;border-radius:50%;transition: all 0.5s}
.avatar:hover{transform:rotate(360deg)}

OK,演示效果的话直接看本站文章下方的评论区域就好了。

<font color=#27cf5e size=4>常见问题</font>


  1. 部分主题可能代码有所差异,不明白可以留言

  2. 【transition: all 0.5s】是表示旋转在0.5秒内完成,可自行修改速度

  3. 【transform: rotate(360deg)】表示图片旋转360度,可自行修改