Hexo NexT主题 设置圆形头像并旋转

发表于 | 分类于 | |  阅读次数
字数统计: 134 | 阅读时长 ≈ 1

找到主题配置文件：

/themes/next/source/css/_common/components/sidebar/sidebar-author.styl

修改为如下代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  border-radius: 60%;
  transition: 2.5s all;  
}

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


.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}