Ryongyon!

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

· 实践教程 · · 3888次浏览

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度,可自行修改
评论 (22条)
  1. vokAlmowl

    plaquenil buy online

    回复
  2. ODONTENCY

    http://buylasixshop.com/ - Lasix

    回复
  3. Affokytat

    https://buypriligyhop.com/ - Priligy

    回复
  4. Gaiscic

    http://buyplaquenilcv.com/ - Plaquenil

    回复
  5. Vente Viagra Montreal

    回复
  6. Wheelry

    Stromectol

    回复
  7. Cephalexin Bromhexina

    回复
  8. jamerie

    Propecia

    回复
  9. utisymn

    https://buypropeciaon.com/ - Propecia

    回复
  10. Online Medication For Gonorrhea

    回复