Hexo框架(十一):给头像添加唱片式旋转特效

前言:

本篇设置基于NEXT主题7.7.2版本!!

侧栏头像动画

先从简单的开始吧!修改头像其实很简单,直接把头像放进 next/source/images/ 下,然后再主题配置文件中,找到以下部分:

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true

url 处指定头像文件即可,头像可以是网络图片,只需要把本地路径替换为网络图片的网址即可。另外,当打开了 rotated 后,鼠标移到头像处会逆时针旋转半圈,鼠标移开又转回来,不过这个效果看起来好像也比较普通:

请找到这个文件并打开它:themes\next\source\css\_common\outline\sidebar\sidebar-author.styl,然后找到如下部分修改: 我从7.8版本开始,已经更新为将这段代码,复制到`hexo/souece/_data/style.styl`文件中即可 参考:新配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

if (hexo-config('avatar.rotated')) {
.site-author-image {
//transition: transform 1s ease-out;
animation: rotate 5s linear infinite;
}

@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}

.site-author-image:hover {
// transform: rotateZ(360deg);
}
}

代码的意思就是:动画是 rotate,时间是 5秒(也即 5秒转一圈),动画速度是线性,动画重复无限次,在下方定义了旋转的角度是从 0 ~ 360°,其中正数是顺时针旋转,负数是逆时针旋转。设置完了以后别忘了 Hexo 三连一下试试效果。

参考

  • 动态头像与动态浏览器标题
------ 本文结束  感谢阅读 ------