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

前言：

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

侧栏头像动画

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

# 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文件中即可，参考：新配置


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