Ryongyon!

这世界上假绅士太多,缺少训练有素的流氓

· 实践教程 · · 5650次浏览

Typecho两个步骤让评论框头像旋转

前言

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

方法

在当前主题下的 style.css 找到以下代码:

.avatar{display:block;float:left;width:40px;height:40px;margin:1.4rem 1rem 0 0;border-radius:50%}

修改为一下代码:

.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)}

常见问题

  1. 部分主题可能代码有所差异,不明白可以留言
  2. transition: all 0.5s 是表示旋转在0.5秒内完成,可自行修改速度
  3. transform: rotate(360deg)表示图片旋转360度,可自行修改
评论 (5条) 取消回复
  1. 博客还挺好看

    回复
  2. 博主是技术博主啊

    回复
  3. 路过来看看

    回复
  4. 新站点没评论,刚从wordpress转到typecho,重新开始博客站,从您的网站上看了不少好玩好用的东西。by minuo.

    回复
  5. avatar的 样式加上了
    效果没有啊

    回复