前言
前段时间一直在学习研究多说评论框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)}
常见问题
- 部分主题可能代码有所差异,不明白可以留言
- transition: all 0.5s 是表示旋转在0.5秒内完成,可自行修改速度
- transform: rotate(360deg)表示图片旋转360度,可自行修改
博客还挺好看
博主是技术博主啊
路过来看看
新站点没评论,刚从wordpress转到typecho,重新开始博客站,从您的网站上看了不少好玩好用的东西。by minuo.
avatar的 样式加上了
效果没有啊